React - How to prevent re-rendering of all the input fields when input changes

Question

I am implementing a form which is generated using a Json. The Json is retrieved from API and then looping over the items I render the input elements. Here is the sample Json :

{
  name: {
      elementType: 'input',
      label: 'Name',
      elementConfig: {
        type: 'text',
        placeholder: 'Enter name'
      },
      value: '',
      validation: {
        required: true
      },
      valid: false,
      touched: false
    }
   }

Here is how I render the form :

    render() {
        const formElementsArray = [];
        for (const key in this.props.deviceConfig.sensorForm) {
         formElementsArray.push({
            id: key,
            config: this.props.deviceConfig.sensorForm[key]
         });

    const itemPerRow = 4;
      const rows = [
        ...Array(Math.ceil(props.formElementsArray.length / itemPerRow))
      ];
      const formElementRows = rows.map((row, idx) =>
        props.formElementsArray.slice(
          idx * itemPerRow,
          idx * itemPerRow + itemPerRow
        )
      );
      const content = formElementRows.map((row, idx) => (
        <div className='row' key={idx}>
          {row.map((formElement) => (
            <div className='col-md-3' key={formElement.id}>
              <Input
                key={formElement.id}
                elementType={formElement.config.elementType}
                elementConfig={formElement.config.elementConfig}
                value={formElement.config.value}
                invalid={!formElement.config.valid}
                shouldValidate={formElement.config.validation}
                touched={formElement.config.touched}
                label={formElement.config.label}
                handleChange={(event) => props.changed(event, formElement.id)}
              />
            </div>
          ))}
        </div>
 ...
    }

I am storing the form state in redux and on every input change , I update the state. Now the problem is everytime I update the state, the entire form is re-rendered again... Is there any way to optimise it in such a way that only the form element which got updated is re-rendered ?

Edit :

I have used React.memo in Input.js as : export default React.memo(input);
My stateful Component is Pure component.
The Parent is class component.

Edit 2 :

Here is how I create formElementArray :

const formElementsArray = [];
for (const key in this.props.deviceConfig.sensorForm) {
    formElementsArray.push({
    id: key,
    config: this.props.deviceConfig.sensorForm[key]
});

I don't see an id in in your json - is there one?

Will Jenkins
– Will Jenkins

2021-05-22 20:18:59 +00:00
Commented May 22, 2021 at 20:18 — Will Jenkins
– Will Jenkins, Commented May 22, 2021 at 20:18
@WillJenkins the id is key name i.e name in the Json

programoholic
– programoholic

2021-05-22 20:20:25 +00:00
Commented May 22, 2021 at 20:20 — programoholic
– programoholic, Commented May 22, 2021 at 20:20
how is name mapped to id? it isn't shown in your question

Will Jenkins
– Will Jenkins

2021-05-22 20:23:42 +00:00
Commented May 22, 2021 at 20:23 — Will Jenkins
– Will Jenkins, Commented May 22, 2021 at 20:23

Zhang TianYu · Accepted Answer · 2021-05-22 21:27:18Z

1

You can make content as a separate component like this. And remove formElementsArray prop from parent component.

export default function Content() {
  const formElementRows = useForElementRows();
      formElementRows.map((row, idx) => (
            <Input
              formId={formElement.id}
              handleChange={props.changed}
            />
      )
}

Inside Input.js

const handleInputChange = useCallback((event) => {
   handleChange(event, formId);
}, [formId, handleChange]);
<input handleChange={handleInputChange} />
export default React.memo(Input)

So you can memoize handleChange effectively. And it will allow us to prevent other <Input /> 's unnecessary renders. By doing this forElementRows change will not cause any rerender for other components.

edited May 22, 2021 at 21:27

answered May 22, 2021 at 19:43

Zhang TianYu

1,1957 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

programoholic Over a year ago

once Input changes , the form state is updated. Wouldn't this cause Content to re-render? and as a result all Input re-renders ??

Zhang TianYu Over a year ago

Only Content will rerender bcs it's state chagned, but not for other Inputs since their props didn't change.

Zhang TianYu Over a year ago

And yes Input should be pureComponent. Which is needed to skip rerender when it's props didn't change. In general Input is purecomponent naturally.

Zhang TianYu Over a year ago

I have updated answer since you need to memorize handlechange. If Input is not Purecomponent, you can just wrap it with React.memo(Input) on it's export

Zhang TianYu Over a year ago

Main issue was handlechange, since it's created everytime we rerender Content.

|

HMR · Accepted Answer · 2021-05-22 21:12:41Z

You could try a container, as TianYu stated; you are passing a new reference as change handler and that causes not only the component to re create jsx but also causes virtual DOM compare to fail and React will re render all inputs.

You can create a container for Input that is a pure component:

const InputContainer = React.memo(function InputContainer({
  id,
  elementType,
  elementConfig,
  value,
  invalid,
  shouldValidate,
  touched,
  label,
  changed,
}) {
  //create handler only on mount or when changed or id changes
  const handleChange = React.useCallback(
    (event) => changed(event, id),
    [changed, id]
  );
  return (
    <Input
      elementType={elementType}
      elementConfig={elementConfig}
      value={value}
      invalid={invalid}
      shouldValidate={shouldValidate}
      touched={touched}
      label={label}
      handleChange={handleChange}
    />
  );
});

Render your InputContainer components:

{row.map((formElement) => (
  <div className="col-md-3" key={formElement.id}>
    <InputContainer
      key={formElement.id}
      elementType={formElement.config.elementType}
      elementConfig={formElement.config.elementConfig}
      value={formElement.config.value}
      invalid={!formElement.config.valid}
      shouldValidate={formElement.config.validation}
      touched={formElement.config.touched}
      label={formElement.config.label}
      //re rendering depends on the parent if it re creates
      //  changed or not
      changed={props.changed}
    />
  </div>
))}

Showrin Barua · Accepted Answer · 2021-05-22 20:07:11Z

0

You have to follow some steps to stop re-rendering. To do that we have to use useMemo() hook.

First Inside Input.jsx memoize this component like the following.

export default React.memo(Input);

Then inside Content.jsx, memoize the value of elementConfig, shouldValidate, handleChange props. Because values of these props are object type (non-primitive/reference type). That's why every time you are passing these props, they are not equal to the value previously passed to that prop even their value is the same (memory location different).

const elementConfig = useMemo(() => formElement.config.elementConfig, [formElement]);
const shouldValidate = useMemo(() => formElement.config.validation, [formElement]);
const handleChange = useCallback((event) => props.changed(event, formElement.id), [formElement]);

return <..>
  <Input
    elementConfig={elementConfig }
    shouldValidate={elementConfig}
    handleChange={handleChange}
  />
<../>

As per my knowledge, this should work. Let me know whether it helps or not. Thanks, brother.

edited May 22, 2021 at 20:07

answered May 22, 2021 at 19:57

Showrin Barua

1,8051 gold badge13 silver badges22 bronze badges

3 Comments

Showrin Barua Over a year ago

Thanks, @gmoniava. Sorry for that mistake. Edited my answer.

programoholic Over a year ago

how elementConfig will get formElement obbject ??

Showrin Barua Over a year ago

@programoholic Ahh... It's a problem. Outside the loop, it won't get this variable. Then you can try wrapping the full loop in useMemo.

Collectives™ on Stack Overflow

React - How to prevent re-rendering of all the input fields when input changes

3 Answers 3

7 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related