Obtuve un bucle infinito ejecutándose debajo del código, básicamente trato de sincronizar el estado de los accesorios con el estado local
const SomeComponent = ({ ids = [] }) => { const selectedIds = useStore(reduxStore); const [_, setSelectedIds] = useState(selectedIds); useEffect(() => { setSelectedIds(ids); }, [ids]); }; No puedo hacer if(ids.length) setSelectedIds(ids) porque serán un caso en el que setSelectedIds es [], también quiero sincronizarlo. Pero tengo bucle infinito.
Su problema es que establece { ids = [] } con [] como valor predeterminado. Si no pasa ids a SomeComponent , seguirá inicializando ids como una nueva matriz nueva [] que causará representaciones continuas
Representando tu problema
const { useEffect, useState } = React const SomeComponent = ({ ids = [] }) => { const [_, setSelectedIds] = useState([]); useEffect(() => { setSelectedIds(ids); }, [ids]); console.log('here') return null }; ReactDOM.render( <SomeComponent/>, document.getElementById("root") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div> La posible solución es que debe establecer { ids } en lugar de tener un valor predeterminado (si está vacío, déjelo como está)
const { useEffect, useState } = React const SomeComponent = ({ ids }) => { const [_, setSelectedIds] = useState([]); useEffect(() => { setSelectedIds(ids); }, [ids]); console.log('here') return null }; ReactDOM.render( <SomeComponent/>, document.getElementById("root") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>