[React] Optimization Cookbook

Containerization of State within Child React Components

The changing of state is the reason why components re-render. If you lift all of your state up into the parent container and pass it down to child components, any update to that state in the parent affects all other sibling components. Causing many useless re-renders. By simply moving the state into that child component, saves having to use React.Memo on all sibling components.

function Parent () {
    const [count, setCount] = useState(0);
    
    return (
        <>
            <Child count={count} setCount={setCount} />
            <SecondChild />
            <ThirdChild />
        </>
    )
}

function Child({count, setCount}) {
    ...
}

We lift Child component state to its Partent component, then passing the props down to the Child component. 

标签：function,const,render,component,React,re,Optimization,Cookbook
来源： https://www.cnblogs.com/Answer1215/p/16218487.html