javascript - How do I see what props have changed in React? - Stack Overflow

admin管理员组

文章数量:1202044

I am looking to make some performance improvements to my React components.

If I have a component that is called like:

    <MyComponent
        anObject={someObject}
        aFn={someFn}
        aValue={value}
    />

React will only "re-render" that component if anObject, aFn, or aValue has changed. If I know my function is re-rendering, how can I tell which of those three props caused it?

I know I can console.log aValue and see if it changes, but what about the object and the function. They can have the same values but be referencing different memory. Can I output the memory location?

I am looking to make some performance improvements to my React components.

If I have a component that is called like:

    <MyComponent
        anObject={someObject}
        aFn={someFn}
        aValue={value}
    />

React will only "re-render" that component if anObject, aFn, or aValue has changed. If I know my function is re-rendering, how can I tell which of those three props caused it?

I know I can console.log aValue and see if it changes, but what about the object and the function. They can have the same values but be referencing different memory. Can I output the memory location?

• javascript
• reactjs

Share Improve this question Follow asked Nov 25, 2020 at 1:38 brendangibsonbrendangibson 2,54344 gold badges2525 silver badges4242 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 16

You can use a useEffect hook for each prop:

const MyComponent = ({ anObject, aFn, aValue }) => {
    React.useEffect(() => {
        console.log('anObject changed');
    }, [anObject]);

    React.useEffect(() => {
        console.log('aFn changed');
    }, [aFn]);

    React.useEffect(() => {
        console.log('aValue changed');
    }, [aValue]);

    // Your existing component code...
};

When the component mounts all three effects will run, but after that the logs will reveal what specifically is changing.

To add to the existing answer, I created a simple utility hook for this purpose.

function useWhatChanged(props: { [prop: string]: unknown }) {
  // cache the last set of props
  const prev = React.useRef(props);

  React.useEffect(() => {
    // check each prop to see if it has changed
    const changed = Object.entries(props).reduce((a, [key, prop]: [string, unknown]) => {
      if (prev.current[key] === prop) return a;
      return {
        ...a,
        [key]: {
          prev: prev.current[key],
          next: prop,
        },
      };
    }, {} as { [k: string]: any });

    if (Object.keys(changed).length > 0) {
      console.group('Props That Changed');
      console.log(changed);
      console.groupEnd();
    }

    prev.current = props;
  }, [props]);
}

function MyComponent(props: Props) {
  // Pass an object of variables you want to check for changes
  useWhatChanged(props)
}

Then just check the console to see which of the props have changed as well as their previous and current values.

本文标签： javascriptHow do I see what props have changed in ReactStack Overflow