Avoid your page re-render unnecessary is a thing very important in optimizing your app performance.

I often trace it through the way watching console.log and determine which state and props changed unnecessarily. After that, I handle that problem.

The approach of the post is we will console.log at componentDidUpdate. Find out the reason make our component re-render (specifically is look for those states and props changed). This post will example of both styles are Class and Hook.

With Class

We apply this block code to componentDidUpdate:

    componentDidUpdate(prevProps, prevState) {
      Object.entries(this.props).forEach(([key, val]) =>
        prevProps[key] !== val && console.log(`Prop '${key}' changed `)
      if (this.state) {
        Object.entries(this.state).forEach(([key, val]) =>
          prevState[key] !== val && console.log(`State '${key}' changed `)

With Hook

We apply function useTraceUpdate to our main function need to trace:

    function useTraceUpdate(props) {
        const prev = useRef(props);
        useEffect(() => {
            const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
            if (prev.current[k] !== v) {
                ps[k] = [prev.current[k], v];
            return ps;
            }, {});
            if (Object.keys(changedProps).length > 0) {
            console.log('Changed props:', changedProps);
            prev.current = props;

    // Usage
    function MyComponent(props) {
        return <div>{props.children}</div>;


That is a way that can help us trace the reason why our component re-render unnecessarily. After look for the reason, we can solve it and improve the performance of the application.