Taneros/react-optimizations

Moving State Down

const Counter = () => { const [counter, setCounter] = useState(0);

return ( <>

{counter}

<Button onClick={() => setCounter(counter + 1)}>Update State </> ); };

Memo

const [title, setTitle] = useState({});

useEffect(() => { setTitle({ title: "Chalie" }); }, []);

const CharlieMemo = memo( Charlie, ({ title: titlePrev }, { title: titleNext }) => { return titleNext.title === titlePrev.title; } );

Children as props

const Fetch = ({ children }) => { {children}