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>
  );
});

• javascript
• reactjs
• react-native
• ecmascript-6

• 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

2 Answers 2

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.