React-Behind the scenes
- Behind the scenes, Virtual DOM logic, state logic
React only cares about components (+ props, state, context, etc..) for building user interfaces.
ReactDOM is interface to the web and RealDom is what user sees.
React determines how the component tree currently looks like and what is should look like. ReactDOM recieves the differences and then manipulates the real DOM.
Re-evaluating state, context... !== Re-rendering the DOM
Whenever something which has already defined specifically changed, React re-executes component functions. With this change, RealDOM only changes the differences by react.
Child components depends on change of parent components.
Because of this, even if there isn't any changes in child components, they will be executed when parent component re-evaluated or re-executed.
Actually it is useless thing to occur execution even though child components don't have any changes.
Optimizing execution of components
- use React.memo() when you export child
export default React.memo(component);
However, memo function needs comparison between prev value and current value.
It requires a performance cost.
So if you think a component may need to be executed whenever parent changed, you don't need to use memo(). (Definitely depends on your app size.)
By the way, you should keep in mind that memo() only works for primitive value(string, number, boolean , etc). Because it might seems same props value in our eyes, react create new prop value everytime.
However, Even though primitive value re-created, it doesn't impact on comparison.
But Function, Object and Array will never be same if they re-created.
Optimizing with useCallback()
For example,
const click = useCallback(() => {
setShow((prevBool) => {
return !prevBool;
});
}, []);If we know that clikc func never be changed, we can use 'useCallback' and prevent recreating that function. 'useCallback' also has dependencies which is same thing of useEffect().(Don't forget that state function already defined as unchangable thing by react.)
useCallback() and its dependencies
Once we defined funcion with useCallback(), it will not recreated later.
If we use some values in that function and want to recreate that function as to changes of variables, we need dependencies of them.
const click = useCallback(() => {
if(condition) {setShow((prevBool) => {
return !prevBool;
});}
}, [condition]);'condition' is variable, and if it changed, we will recreate clikc function.
components & state
State is comming from react and React manage that to connect your component.
After app run at the first time, react will not re-create state again.
That's why we don't need to care about whethere state may be re-initialized.
State scheduling & batching
setState('something') -> Schedules a state update with 'something' -> Scheduled state change (This is similar concept with async). -> new state 'something' -> re-evaluate component.
This is why it is recommended to use callback form when your state change depends on previous state(safer way).
When you have multiple state changes in a function, react will not execute each of them. After the function call finished, the state changes will re-rendered at once.(This is batching and it means there is just one scheduling even though there are multiple state changes in function).
useMemo()
We have some logics in our code sometimes like sorting array , mapping array ...
If it treats huge data, it might occur loading of your code process.
So we need to cut down that unneccesary process with useMemo.
Its usage is almost same with useCallback.
Just wrapping a variable which doesn't need to be changed whenever function re-rendered or a logic which only need to be executed when some values changed in that logic function with useMemo
useMemo(() => {} , [dependecies])
All above things is for optimization, so there is no need to care about these problems at the first time
