I have some heavy forms that I'm dealing with. Thus, I'm trying to squeeze performance wherever I can find it. Recently I added the Why-did-you-render addon to get more insight on what might be slowing down my pages. I noticed that, for example, when I click on a checkbox ponent about all of my other ponents re-render. The justification is always the same. WDYR says

Re-rendered because of props changes: different functions with the same name {prev onChangeHandler: ƒ} "!==" {next onChangeHandler: ƒ}

As much as possible, I try to respect best the best practices indications that I find. The callback functions that my ponent passes follow this pattern

import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
export function TopLevelComponent({props}){

    const defaultData = {name: '', useMale: false, useFemale: false}

    const [data, setData] = useState(defData);
    const { t } = useTranslation();
    const updateState = (_attr, _val) => {
        const update = {};
        update[_attr] = _val;
        setData({ ...data, ...update });
    }

    const updateName = (_v) => updateState('name', _v);//Text input
    const updateUseMale = (_v) => updateState('useMale', _v);//checkbox
    const updateUseFemale = (_v) => updateState('useFemale', _v);//checkbox
    ...

    return <div>
        ...
        <SomeInputComponent value={data.name} text={t('fullName')} onChangeHandler={updateName} />
        <SomeCheckboxComponent value={data.useMale} onChangeHandler={updateUseMale} text={t('useMale')}/>
        <SomeCheckboxComponent value={data.useFemale} onChangeHandler={updateUseFemale} text={t('useFemale')}/>
        ...
    </div>
}

In an example like this one, altering any of the inputs (eg: Writing text in the text input or clicking one of the checkboxes) would cause the other 2 ponents to re-render with the justification presented above.

I guess that I could stop using functional ponents and utilize the shouldComponentUpdate() function, but functional ponents do present some advantages that I'd rather keep. How should I write my functions in such a way that interacting with one input does not force an update on another input?

I have some heavy forms that I'm dealing with. Thus, I'm trying to squeeze performance wherever I can find it. Recently I added the Why-did-you-render addon to get more insight on what might be slowing down my pages. I noticed that, for example, when I click on a checkbox ponent about all of my other ponents re-render. The justification is always the same. WDYR says

Re-rendered because of props changes: different functions with the same name {prev onChangeHandler: ƒ} "!==" {next onChangeHandler: ƒ}

As much as possible, I try to respect best the best practices indications that I find. The callback functions that my ponent passes follow this pattern

import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
export function TopLevelComponent({props}){

    const defaultData = {name: '', useMale: false, useFemale: false}

    const [data, setData] = useState(defData);
    const { t } = useTranslation();
    const updateState = (_attr, _val) => {
        const update = {};
        update[_attr] = _val;
        setData({ ...data, ...update });
    }

    const updateName = (_v) => updateState('name', _v);//Text input
    const updateUseMale = (_v) => updateState('useMale', _v);//checkbox
    const updateUseFemale = (_v) => updateState('useFemale', _v);//checkbox
    ...

    return <div>
        ...
        <SomeInputComponent value={data.name} text={t('fullName')} onChangeHandler={updateName} />
        <SomeCheckboxComponent value={data.useMale} onChangeHandler={updateUseMale} text={t('useMale')}/>
        <SomeCheckboxComponent value={data.useFemale} onChangeHandler={updateUseFemale} text={t('useFemale')}/>
        ...
    </div>
}

In an example like this one, altering any of the inputs (eg: Writing text in the text input or clicking one of the checkboxes) would cause the other 2 ponents to re-render with the justification presented above.

I guess that I could stop using functional ponents and utilize the shouldComponentUpdate() function, but functional ponents do present some advantages that I'd rather keep. How should I write my functions in such a way that interacting with one input does not force an update on another input?

• javascript
• reactjs

• Can you add a little bit more code so we can understand. We have tools like memo and useMemo to reduce the unnecessary renders – Zohaib Ijaz Commented May 17, 2019 at 2:12
• @ZohaibIjaz Would you want the ponent specific function? – Axel Commented May 17, 2019 at 2:14
• Actually, I could not understand which ponent is causing the change and which ponents are getting rendered which don't need to. – Zohaib Ijaz Commented May 17, 2019 at 2:15
• @ZohaibIjaz added some more code. I tried using memo but I was getting some funky results with the ponents that required more plex data. If that's the solution I'll try debugging my code with memo – Axel Commented May 17, 2019 at 2:24
• are you using context as state? where is your state residing? – Zohaib Ijaz Commented May 17, 2019 at 2:30

3 Answers 3

The problem stems from the way you define your change handlers:

const updateName = (_v) => updateState('name', _v)

This line is called on each render and thus, every time your ponent is rendered, the prop has a new (albeit functionality-wise identical) value. The same holds for every other handler as well.

As an easy solution you can either upgrade your functional ponent to a fully fledged ponent and cache the handlers outside of the render function, or you can implement shouldComponentUpdate() in your child ponents.

You have to memoize parent function before pass to children, using useCallback for functional ponent or converting to class property if you use class.

export default class Parent extends React.PureComponent {
    constructor(props) {
       super(props);
       this.onClick = this.onClick.bind(this);
    }

    onClick() {
       console.log("click");
    }

    render() {
        return (
           <ChildComponent
               onClick={ this.onClick }
           />
        );
    }
}

with useCallback:

Parent = () => {
   const onClick = useCallback(
      () => console.log('click'),
      [] 
   );

   return (
        <ChildComponent
            onClick={onClick}
        />
   );
}

You need to use memo for your child ponents to reduce renders

const SomeInputComponent  = props => {

};

export default memo(SomeInputComponent);

// if it still causes rerender witout any prop change then you can use callback to allow or block render

e.f.

function arePropsEqual(prevProps, nextProps) {
  return prevProps.name === nextProps.name; // use your logic to determine if props are same or not
}

export default memo(SomeInputComponent, arePropsEqual);

/* One reason for re-render is that `onChange` callback passed to child ponents is new on each parent render which causes child ponents to re-render even if you use `momo` because function is updated on each render so in order to fix this, you can use React hook `useCallback` to get the same function reference on each render.


So in you parent ponent, you need to do something like 
*/

import { useCallback } from 'react';


const updateName = useCallback((_v) => updateState('name', _v), [])