最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to avoid re-rendering when i pass an object as prop to child component? - Stack Overflow

programmeradmin2浏览0评论

I have parent ponent with multiple child ponents. Different types of data will be passed to child ponents after getting data from api. Some of the ponents will get object as a prop. I am trying to avoid rerenders in that ponent. Even if the data is same it is rerendering. How can i avoid this rerenders?

const Parent = () => {
  const [childData, setChildData] = useState(null);
  
  useEffect(() => {
    const data = getChildData();
    setChildData(data);
  }, [])

  return (
      <Child data={childData}/>
  );
};

const Child = React.memo((props) => {
  const {name, email} = props.data;
  return (
      <div>
        <p>Name: {name}</p>
        <p>Email: {email}</p>
      </div>
  );
});

I have parent ponent with multiple child ponents. Different types of data will be passed to child ponents after getting data from api. Some of the ponents will get object as a prop. I am trying to avoid rerenders in that ponent. Even if the data is same it is rerendering. How can i avoid this rerenders?

const Parent = () => {
  const [childData, setChildData] = useState(null);
  
  useEffect(() => {
    const data = getChildData();
    setChildData(data);
  }, [])

  return (
      <Child data={childData}/>
  );
};

const Child = React.memo((props) => {
  const {name, email} = props.data;
  return (
      <div>
        <p>Name: {name}</p>
        <p>Email: {email}</p>
      </div>
  );
});
Share Improve this question asked Sep 8, 2020 at 13:17 Sudeep KumarSudeep Kumar 9891 gold badge7 silver badges16 bronze badges 2
  • 2 You should take a look at memoization : reactjs/docs/react-api.html#reactmemo – Florian Motteau Commented Sep 8, 2020 at 13:20
  • Here's a similar question stackoverflow./questions/57705867/… – Abdul Azeem Commented Sep 9, 2020 at 8:05
Add a ment  | 

2 Answers 2

Reset to default 7

As per React Official Docs, By default React will only shallowly pare plex objects in the props object. If you want control over the parison, you can also provide a custom parison function as the second argument. https://reactjs/docs/react-api.html#reactmemo. Here is an example.

const Parent = () => {
    const [childData, setChildData] = useState(null);

    useEffect(() => {
        const data = getChildData();
        setChildData(data);
    }, [])

    return (
        <Child data={childData} />
    );
};

function areEqual(prevProps, nextProps) {
    return prevProps.name == nextProps.name && prevProps.email == nextProps.email;
}
const Child = React.memo((props) => {
    const { name, email } = props.data;
    return (
        <div>
            <p>Name: {name}</p>
            <p>Email: {email}</p>
        </div>
    );
}, areEqual);

By default React.memo will only shallowly pare plex objects in the props.

You can use custom equality check of props. Pass the custom check function as second argument to React.memo similar to below

const areEqual = (prevProps, nextProps) => {
  const {name, email} = prevProps.data;
  const {name: nextName, email: nextEmail} = nextProps.data;
  return name === nextName && email === nextEmail;
};

const Child = React.memo((props) => {...}, areEqual);

For more details check here.

发布评论

评论列表(0)

  1. 暂无评论