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

admin管理员组

文章数量:1326104

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

Share Improve this question Follow asked Sep 8, 2020 at 13:17 Sudeep KumarSudeep Kumar 98911 gold badge77 silver badges1616 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

Sorted by: 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.

本文标签： javascriptHow to avoid rerendering when i pass an object as prop to child componentStack Overflow