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)

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