When a component visually wraps other components, let it accept JSX as children. This way, when the wrapper component updates its state, React knows that its children don’t need to re-render.
Prefer local state and don’t lift state up any further than necessary. For example, don’t keep transient state-like forms and whether an item is hovered at the top of your tree or in a global state library.
Keep your rendering logic pure. If re-rendering a component causes a problem or produces some noticeable visual artefact, it’s a bug in your component! Fix the bug instead of adding memoization.
Avoid unnecessary Effects that update the state. Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over.
Remove unnecessary dependencies from your Effects. instead of memoization,.