Estoy tratando de representar un componente con estado dentro de las filas de la ventana de reacción (usando FixedSizeList), pero su estado ( useState ) no se mantiene cuando se vuelven a procesar, por lo que se reinicia cada vez que me desplazo hacia ellos. Esto tiene sentido porque se están desmontando, pero ¿hay alguna forma de evitar que se vuelvan a renderizar a través de memo o useCallback ? He visto algunos ejemplos de evitar re-renderizaciones, pero no puedo hacer que funcionen. En este ejemplo de caja de arena que hice, intenté memorizar un componente ( <InnerRow> ) que solo toma un único accesorio, pero parece volver a representarlo independientemente de llamar a memo .
¿No estoy memorizando correctamente o estoy haciendo algo mal? ¿O esto no es posible, y mi única solución es mantener el estado de alguna otra manera, fuera del componente de fila?
Puede probar usando useReducer en lugar de memo . Reducer lo ayudará a mantener el estado de los componentes seleccionados incluso si no están montados en dom.
function reducer(state, action) { switch (action.type) { case "add": { return { isOn: [...state.isOn, action.payload] }; } case "remove": { const newArray = [...state.isOn]; const newState = newArray.filter((a) => a !== action.payload); return { isOn: newState }; } default: throw new Error(); } }Puede consultar mi solución aquí: https://codesandbox.io/s/keen-mclaren-nenc9v?file=/src/App.js
Después de investigar un poco más, creo que la respuesta a mi pregunta es: No , no es posible. ¿Dónde viviría exactamente esa memoria si ya no está montada? Tendré que mantener el estado en otro lugar, como en el componente principal o mediante el estado global.