React js is a chosen UI library for many developers for their front end application. While there are many developers used to react js library but still, there are some points we don’t focus at development time.
So below are the small facts about react components that could take us out of bugs or we could get the cause of bugs or errors if we keep them in mind while developing applications.
1. The flow of the lifecycle hook useEffect.
The flow goes from bottom to top. Suppose we have a parent component P and a child component C and both are using hook useEffect. Now when the rendering will occur due to state change/ props change.
First, the C’s useEffect will be called first and then P’s useEffect will be called.
2. Context API uses in components in some cases prevent optimizations using React.memo
If you have searched for the react component optimizations, you will definitely come across the React.memo.
React.memo simply keeps the cache of the last rendered output of the component until the function passed in the second parameter of React.memo will not return false.
But if you have used the useContext in the same component where you have used the React.memo then component will re-render every time when the context data will be changed.
3. Returning null from component render method will prevent extra element in DOM
Sometimes we need to run all the lifecycle hooks and other codes in the component for different kinds of purposes but we don’t want that component to show in UI/DOM. In that case, we return null from the component.
But if we return any other value( Ex. empty string ) from the component other than null then it will create an extra DOM node.
4. When “useRef” is being used in the react component it is rendered twice.