Determine which props causes React components to re-render

determine-changed-props.js

import React, { Component } from 'react';

export default function withPropsChecker(WrappedComponent) {
  return class PropsChecker extends Component {
    componentWillReceiveProps(nextProps) {
      Object.keys(nextProps)
        .filter(key => {
          return nextProps[key] !== this.props[key];
        })
        .map(key => {
          console.log(
            'changed property:',
            key,
            'from',
            this.props[key],
            'to',
            nextProps[key]
          );
        });
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// Usage
withPropsChecker(MyComponent)

@IamFonky I am trying it on story book and trying to check my react-select component, i wrote some consoles..it is rendering 4 time while selecting dropdown value.Thought to check due to which props its rerendering. but it is providing me props only at the time of loading only. On change event of that my react-select it is giving below.
<ReactFnCompPropsChecker
compType='DEEP'
childrenProps={{
variant: 'form-select',
optionList: options,
label: 'Name',
required: true,
loading: false,
onChange: (input: string) => console.log(input),
error: false,
errorMessage: '',
placeholder: '',
value: 'emailVerificationPending',
width: '300px'
}}
>
{() => (
<DropDown
variant={text('variant', 'form-select') as tSelectVariant}
optionList={object('optionList', options)}
label={text('label', 'Name')}
required={boolean('required', true)}
loading={boolean('loading', false)}
onChange={action('Value selected')}
error={boolean('error', false)}
errorMessage={text('errorMessage', '')}
placeholder={text('placeholder', '')}
value={text('value', 'emailVerificationPending')}
width={text('width', '300px')}
/>
)}

First render :
variant : form-select
optionList : [object Object],[object Object],[object Object]
label : Name
required : true
loading : false
onChange : function onChange(input) {
return console.log(input);
}
error : false
errorMessage :
placeholder :
value : emailVerificationPending
width : 300px

You're not using the same props you gave to the checker comp in the DropDown. So you may be recreating props and making the DropDown rerender here.

You did this :

[...]
 >
{() => (
<DropDown
[...]

But you should do this :

[...]
 >
{(props) => (
<DropDown {...props}\>
[...]

As I wrote in my first comment, use it like that :

<ReactFnCompPropsChecker childrenProps={{prop1:...,prop2:...,...}}>
  {props=>(<TestedComponent{...props}/>)}
</ReactFnCompPropsChecker>

Use the variable given back to the children component in your DropDown in order to ensure you're looking at the same values.

I hope it helped you @kulkarnipradnyas