How to avoid rerender all child components which in loop when parent component state update

Question

I m having one child component which is inside a loop of parent component. when one of the child components is updating the state of parent component, it is re-rendering the all children since it is loop. How can i avoid the re-render for each iteration.


function Parent() {
  const [selectedChild, setSelectedChild] = useState([]);

  const onChangeHandle = (event, id) => {
    const checked = event.target.checked;
      let updatedArray = [...selectedChild];
      if(checked){
         if(!selectedChild.includes(id)){
            updatedArray.push(id); 
         }
      }
      else{
         var index = updatedArray.indexOf(id)
         if (index !== -1) {
            updatedArray.splice(index, 1);
         }
      }
      setSelectedChild(updatedArray);
  }
  const dummy = (id) => {
    return selectedChild.includes(id);
  }
  return (
    <div>
    <table>
    <tbody>
      {[1,2,3].map((value, index) => {
      return (
        <Child 
        key={index} 
        index={index} 
        value={value} 
        handle={onChangeHandle}
        isSelected={dummy}
        />
      )
      })}
    </tbody>
    </table>
    <div>
      {selectedChild}
    </div>
  </div>)
}

function Child({index, value, handle, isSelected }) {
  console.log('rendering')

 return (
 <tr>
    <td>
      <input 
      type="checkbox" 
      checked={isSelected(index)}
      onChange={(event) => handle(event, index)}/>
    </td>
    <td>hello {index} {value}</td>
 </tr>
 )
}

export default function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

Current behaviour: In above code, When i m clicking on the checkbox in one of the children component, it is updating the parent component state(selectedChild). So the loop is executing and all children(all table rows) are re rendering.

Expected behaviour: Only that particular row have to go for re-render

Demo: https://codesandbox.io/s/newpro-0pezc

Well for one thing, try to use unique key property values rather than array indicies. That can definitely avoid some re-renders even if it isn't your specific problem here. — Jared Smith
I'm not going to vote to close this as a duplicate, but does this answer your question? — Jared Smith

buzatto buzatto · Accepted Answer · 2021-01-08T14:42:29

for that you can use React.memo that will memoize your component if props remains the same. But given your code you need to make some extra changes:

you have to apply useCallback to memoize onChangeHandle function;
to memoize properly onChangeHandle you need to refactor it. you can't pass selectedChild directly, otherwise it memoizes its value. use setSelectedChild passing as argument a function that takes selectedChild instead.

your Child should receive isSelected as boolean value instead of function. otherwise props will remain the same and Child never updates;

import React, { useState, memo, useCallback } from "react";

function Parent() {
  const [selectedChild, setSelectedChild] = useState([]);

  const onChangeHandle = useCallback((event, id) => {
    setSelectedChild(selectedChild => {
      const checked = event.target.checked;
      let updatedArray = [...selectedChild];
      if (checked) {
        if (!selectedChild.includes(id)) {
          updatedArray.push(id);
        }
      } else {
        var index = updatedArray.indexOf(id);
        if (index !== -1) {
          updatedArray.splice(index, 1);
        }
      }
      return updatedArray;
    });
  }, []);

  const dummy = id => {
    return selectedChild.includes(id);
  };

  const renderChildren = () =>
    [1, 2, 3].map((value, index) => {
      return (
        <Child
          key={index}
          index={index}
          value={value}
          handle={onChangeHandle}
          isSelected={dummy(index)}
        />
      );
    });

  return (
    <div>
      <table>
        <tbody>{renderChildren()}</tbody>
      </table>
      <div>{selectedChild}</div>
    </div>
  );
}

const Child = memo(({ index, value, handle, isSelected }) => {
  console.log("rendering");

  return (
    <tr>
      <td>
        <input
          type="checkbox"
          checked={isSelected}
          onChange={event => handle(event, index)}
        />
      </td>
      <td>
        hello {index} {value}
      </td>
    </tr>
  );
});

export default function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

https://stackblitz.com/edit/so-memo-children?file=src/App.js

How to avoid rerender all child components which in loop when parent component state update

3 Answers