'how to rerender only child component?

i have problem with rerender component. I have array of object and I display it as list of tiles. Then I can check some of them and do something with picked objects. I created simple state in parent component to update selected items.

  const [selectedTable, setSelectedTable] = useState([]);

  const handleSelectTable = (state, item) => {
   if (state) {
     setSelectedTable((prev) => [...prev, item]);
   } else {
     setSelectedTable((prev) => prev.filter((el) => el !== item));
}

};

After that I pass handleSelectTable to my child component (it is single tile) and then there I have anotehr state to update if single tile is checked or not and I change that state on onClick.

 const [isChecked, setIsChecked] = useState(false);
 //-------------------------------//
 onClick={() => setIsChecked(!isChecked)}

Finaly I created useEffect that call handleSelectTable every time when state isChecked changed.

useEffect(() => {
 handleSelect(isChecked, data);
}, [isChecked]);

But unfortunately it's call infinity loop. Tahats happend becouse satate selectedTable rerender parent component with children components. Then state isChecked back to default. Is any chance to rerender only that component i want insted of rerenering parent component with all children?

Thanks for your attention.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source