¿Se puede refactorizar el siguiente código para no mutar la matriz de estado? Básicamente, quiero que mientras navego por la aplicación de un lado a otro a través de props.history.push, no debería volver a crear la matriz, ya que mi objetivo es conservar la opción seleccionada.
const [options1, setOptions1] = useState([ {value: 'ABC', text: 'ABC', id: 1}, {value: 'DEF', text: 'DEF', id: 2} ]); const [options2, setOptions2] = useState([ {value: 'ABC', text: 'ABC', id: 1}, {value: 'DEF', text: 'DEF', id: 2}, {value: 'XYZ', text: 'XYZ', id: 3} ]); let finalOpts = options1; // Is there a better way to do this ? if (someConditionIsTrue) { finalOpts = options2; } const [selectedOpt, setSelectedOpt] = useState(finalOpts[0]); <MyList id="myDD" selectedOpt={selectedOpt} options={finalOpts} />Use useMemo para precalcular los valores si su lógica de interfaz de usuario depende de algún condicional. Esto por sí solo no preservará el estado seleccionado si el componente está desmontado. Para conservar el estado seleccionado incluso después de que se haya desmontado el componente, deberá almacenar la selección en algún tipo de estado global.
const options = useMemo(() => { if(someConditionIsTrue) { return [ {value: 'ABC', text: 'ABC', id: 1}, {value: 'DEF', text: 'DEF', id: 2} ]; } return [ {value: 'ABC', text: 'ABC', id: 1}, {value: 'DEF', text: 'DEF', id: 2}, {value: 'XYZ', text: 'XYZ', id: 3} ] }, [someConditionIsTrue]); const [selectedItem, setSelectedItem] = useState(); return (<MyList id="myDD" selectedOpt={selectedItem || options[0]} onSelectionChanged={setSelectedItem} options={options} />)