Is this kind of component needs normalization? And what is it's use exactly?
Answered
Satin Angora posted this in #help-forum
Satin AngoraOP
After reading up on
I have this [component](https://gist.github.com/RVYA/0ed015ec7de3d716a0f76292bb5aebe3) (Gist link) defined. Should I also normalize the variables I have defined? As I understand that variables will be reconstructed after each re-render; but isn't point of const variables to keep them in memory for later uses? Is this different with JS? (I'm coming from C#, Java and Dart languages)
Also what is the exact use case of normalization? How
useEffect hook for a while, I have noticed that in this [pull request](https://github.com/facebook/react/pull/19590) they are normalizing the variables with useMemo. I have this [component](https://gist.github.com/RVYA/0ed015ec7de3d716a0f76292bb5aebe3) (Gist link) defined. Should I also normalize the variables I have defined? As I understand that variables will be reconstructed after each re-render; but isn't point of const variables to keep them in memory for later uses? Is this different with JS? (I'm coming from C#, Java and Dart languages)
Also what is the exact use case of normalization? How
useMemo is used to achieve this?Answered by fuma
First you have to understand what
However, we won’t deep compare an object since it can cause a poor performance. Hence, we’ll compare its memory address with
That’s why we need
useEffect does. This hook calls the callback function when dependency array changes, by comparing the dependencies.However, we won’t deep compare an object since it can cause a poor performance. Hence, we’ll compare its memory address with
=== operator, it means if the object in dependency list is reconstructed in each render, callback in useEffect will be called every time. That’s why we need
useMemo, so that it only reconstruct the object when the dependency list of useMemo is changed. It’s necessary in order to avoid infinite loop/re-renders.2 Replies
First you have to understand what
However, we won’t deep compare an object since it can cause a poor performance. Hence, we’ll compare its memory address with
That’s why we need
useEffect does. This hook calls the callback function when dependency array changes, by comparing the dependencies.However, we won’t deep compare an object since it can cause a poor performance. Hence, we’ll compare its memory address with
=== operator, it means if the object in dependency list is reconstructed in each render, callback in useEffect will be called every time. That’s why we need
useMemo, so that it only reconstruct the object when the dependency list of useMemo is changed. It’s necessary in order to avoid infinite loop/re-renders.Answer
Feel free to read React.js docs