反应回调避免为孩子重新渲染

Question

I have trouble to avoid re-renders. Have a look in my simplified example: https://codesandbox.io/s/gracious-satoshi-b3p1u?file=/src/App.js Open the console. I have expensive and heavy code in the child hook which filters a big array (not in this lightweight example). Every time "child has been rendered" get's printed into the console, my browser laggs and crashes if i do it too often.

There is no state in Child . I just use it to add a certain text piece (user can select from a big list of emojis and special chars) if i click to the textarea which needs a callback to communicate. I tried React.useMemo() and useMemo() but neither worked.

Answer 1

You should use useCallback to memoize functions/event handlers and avoid creating them every time, and also for child components you should use memo to rerender only if props have changed

App.js

import React, { useCallback, useState } from "react";
import Child from "./Child";

export default function App() {
  const [data, setData] = useState({ title: "default title", test: null });
  const cb1 = useCallback(
    (x) => setData({ ...data, title: x.target.value }),
    []
  );
  const cb2 = useCallback((x) => setData({ ...data, test: x }), []);

  return (
    <div>
      <p>Title: {data.title}</p>
      <p>Test: {data.test}</p>

      <input onChange={cb1} />
      <Child clickCallback={cb2} />
    </div>
  );
}

Child.js

import { memo } from "react";

export default memo(function Child(props) {
  return (
    <>
      {console.log("child has been rendered")}
      <button onClick={() => props.clickCallback("test")}>test</button>
      <button onClick={() => props.clickCallback("test2")}>test2</button>
      <button onClick={() => props.clickCallback("test3")}>test3</button>
      <button onClick={() => props.clickCallback("test4")}>test4</button>
    </>
  );
});

check a working example here https://codesandbox.io/s/vibrant-curran-tv502

Answer 2

Try this. Add useMemo dependancies as needed,

 export default function App() { const [data, setData] = useState({ title: "default title", test: null }); const childs = useMemo(() => { return ( <Child clickCallback={(x) => setData({...data, test: x })} /> ) }, []); return ( <div> <p>Title: {data.title}</p> <p>Test: {data.test}</p> <input onChange={(x) => setData({...data, title: x.target.value })} /> {childs} </div> ); }