Aprecio que este sea un problema común aquí, pero me cuesta pensar en una solución para mi situación particular. Mi código funciona según lo previsto, pero recibo una advertencia de eslint sobre la dependencia que falta en useEffect . La dependencia que falta es una función que envía el estado al padre, pero si la agrego como dependencia, provoca un bucle infinito.

Aquí está mi componente secundario CheckboxGroup.js :

El itemId y el estado comprobado se checkedState de su elemento secundario (CheckboxItem.js) y el estado de selectedItemIds se actualiza. Luego usé useEffect porque los ID de elementos selectedItemIds deben transferirse a su elemento principal (App.js) de inmediato. Como puede ver, falta onSelectHandler en su lista de dependencias.

 const CheckboxGroup = (props) => {
 const categoryName = props.items[0].category;

 const [selectedItemIds, setSelectedItemIds] = useState([
 ...props.defaultCheckboxIds,
 ]);

 const clickHandler = (itemId, checkedState) => {
 checkedState
 ? setSelectedItemIds((prev) => [...prev, itemId])
 : setSelectedItemIds((prev) => prev.filter((c) => c !== itemId));
 };

 //destructure prop
 const onSelectHandler = props.onSelectHandler;

 useEffect(() => {
 onSelectHandler(categoryName, selectedItemIds)
 }, [categoryName, selectedItemIds]);

 return (
 <ul className="card__inner">
 {props.items.map((item) => {
 return (
 <CheckboxItem
 isChecked={selectedItemIds.includes(item.id)}
 id={item.id}
 name={item.name}
 price={item.price}
 category={item.category}
 key={item.id}
 onClick={clickHandler}
 />
 );
 })}
 </ul>
 );
};

Aquí está la función en App.js que recibe los datos y luego actualiza el estado de las selections .

 const [selections, setSelections] = useState({
 chairs: 2,
 tables: 8,
 "large tables": [10, 12]
 });

 const selectionHandler = (selectedCategoryName, selectedItemIds) => {
 setSelections((prev) => ({
 ...prev,
 [selectedCategoryName]: selectedItemIds,
 }));
 };

Entonces, me pregunto si hay alguna manera de incluir la dependencia en useEffect sin que se active un bucle infinito o si hay una forma alternativa de levantar el estado, ¿quizás sin useEffect ?

Cualquier ayuda apreciada, gracias.