React Important concepts you should know

React important concepts can help you write cleaner code, better code, and optimize performance. in this article, I will share five React best practices you should know of.

1. Use Higher-order Components (HOCs)

A higher-order component is an advanced technique in React that is used for supercharging and reusing components. it takes a component as its argument and returns something else.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

2. Properly understanding The UseEffect Hook

This is one of the important things because if you do not understand this you will not get anywhere in React. I can't emphasize enough the dangers of this hook, you should properly understand this hook and how it relates to the usestate hook so you won't get a lot of infinite loops. I like to think of this hook as middleware that runs after the component has been rendered initially, I could talk more about it but that's the article for another day follow me if you want to read that.

3. Lazy loading images in React

Multiple images can severely affect the performance of any application, To compact this, we avoid loading all the images at once. With lazy loading, we can wait until each of the images is about to appear in the viewport before we render them in the DOM.

4. Code-splitting in React using dynamic import()

By default, React apps render their final bundle in one giant file, the good side of this is that it reduces the HTTP Request we might be making for different files, but as your app grows bigger the file size increases this becomes a serious problem. With code-splitting, React allows us to split a large bundle file into multiple chunks using dynamic import() followed by lazy loading these chucks when we need them with React.lazy

5. Build Custom Hooks

we have a bunch of important hooks available to us by default for us to use, but to extend the component logic further it is important we build custom hooks. Custom React hooks are an essential tool that let you add special, unique functionality to your React applications.

6. Bouns

it also important to understand the following:

1. Custom Hooks
2. React's rules of hooks
3. React Fragments
4. React context and context API
5. React portal
6. JSX Rules
7. Refs and DOM

In conclusion

Those are the important concepts I think you should understand. if enjoy it leave a reaction and follow me for more peace.