Skip to content

Instantly share code, notes, and snippets.

Last active July 21, 2023 02:23
Star You must be signed in to star a gist
What would you like to do?
Determine which props causes React components to re-render
import React, { Component } from 'react';
export default function withPropsChecker(WrappedComponent) {
return class PropsChecker extends Component {
componentWillReceiveProps(nextProps) {
.filter(key => {
return nextProps[key] !== this.props[key];
.map(key => {
'changed property:',
render() {
return <WrappedComponent {...this.props} />;
// Usage
Copy link

Hahaha, my bad too. I made de changes without really reviewing. Saturday work style xD

Copy link

...forgot to say earlier, thank you for this - saved me some time creating something similar. Thank you :-)

Copy link

If you wanted to take it a bit further instead of simply logging the props, there’s a useful package to diff objects which will output the difference. Very useful when nothing has really changed, but simply the ref.

Copy link

lrpinto commented Apr 21, 2020

This is good. However, what do you think of logging changes on componentDidUpdate, instead of componentWillReceiveProps, therefore not delaying the rendering :)

Copy link

@IamFonky it is giving only initial props, how can i check prop in the case of react-select change?

Copy link

@kulkarnipradnyas I don't really understand your question. What do you mean by react-select change? If you use a select component, the onChange function won't trigger any changes in his own props... can you provide an example of what you try to do please?

Copy link

kulkarnipradnyas commented Jul 19, 2020

@IamFonky I am trying it on story book and trying to check my react-select component, i wrote some 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.
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'
{() => (
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

Copy link

IamFonky commented Jul 19, 2020

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 :

{() => (

But you should do this :

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

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

<ReactFnCompPropsChecker childrenProps={{prop1:...,prop2:...,...}}>

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment