Estoy tratando de representar varios botones en un componente principal que administra todos los estados secundarios de forma centralizada. Esto significa que el padre almacena, por ejemplo, el estado del clic, el estado deshabilitado para cada botón en su propio estado usando useState y lo pasa como accesorios a los hijos. Además, la función onClick también se define dentro del componente principal y se transmite a cada elemento secundario. En este momento estoy haciendo esto como lo siguiente:
const [isSelected, setIsSelected] = useState(Array(49).fill(false)); ... const onClick = useCallback((index) => { const newIsSelected = [...prev]; newIsSelected[i] = !newIsSelected[i]; return newIsSelected; }, []); ... (In the render function:) return isSelected.map((isFieldSelected, key) => { <React.Fragment key={key}> <TheChildComponent isSelected={isFieldSelected} onClick={onClick} /> </React.Fragment/> })Para tratar de evitar que el componente secundario se vuelva a renderizar, estoy usando...
useCallback para hacer reaccionar ver que la función onClick siempre permanece igualReact.Fragment para hacer que reaccione encuentre un componente nuevamente porque, de lo contrario, un niño no tendría una identificación única o algo similarEl componente secundario se exporta como:
export default React.memo(TheChildComponent, compareEquality) con
const compareEquality = (prev, next) => { console.log(prev, next); return prev.isSelected === next.isSelected; } De alguna manera, la línea de registro en compareEquality nunca se ejecuta y, por lo tanto, sé que compareEquality nunca se ejecuta. Yo tampoco sé por qué está pasando esto.
Revisé todos los blogs, las preguntas anteriores de Stackoverflow, etc., pero aún no pude encontrar una manera de evitar que los componentes secundarios se reprodujeran cada vez que al menos un componente ejecuta la función onClick y, al hacerlo, actualizó el estado isSelected .
Sería muy feliz si alguien pudiera indicarme la dirección correcta o explicarme de dónde viene mi problema.
¡Gracias por adelantado!
Este código en realidad generará una nueva función onClick cada renderizado, porque useCallback no recibe una matriz de deps:
const onClick = useCallback((index) => { const newIsSelected = [...prev]; newIsSelected[i] = !newIsSelected[i]; return newIsSelected; }); Lo siguiente solo debería crear una función onClick y reutilizarla en todos los renders:
const onClick = useCallback((index) => { const newIsSelected = [...prev]; newIsSelected[i] = !newIsSelected[i]; return newIsSelected; }, []); Combinado con Vanilla React.memo , esto debería evitar que los niños se vuelvan a renderizar, excepto cuando cambia isSelected . (Su segundo argumento para React.memo también debería haber solucionado esto; no estoy seguro de por qué no funcionó).
Como nota al margen, puede simplificar este código:
<React.Fragment key={key}> <TheChildComponent isSelected={isFieldSelected} onClick={onClick} /> </React.Fragment/>a lo siguiente:
<TheChildComponent key={key} isSelected={isFieldSelected} onClick={onClick} /> (suponiendo que de hecho solo necesita un único componente en el cuerpo del map ).
Resulta que el único problema no era useCallback , useMemo ni nada similar.
En la función de renderizado del componente principal no usé directamente
return isSelected.map(...)Incluí esa parte de un componente separado muy simple como este:
const Fields = () => { return isSelected.map((isFieldSelected, i) => ( <TheChildComponent key={i} isSelected={isFieldSelected} onClick={onClick} /> )); }; Ahí estaba mi problema. Al mover el código de los Fields del componente separado a la declaración de devolución del componente principal, el error de representación desapareció.
Aún así, gracias por la ayuda.