Dado que no puede mantener el estado en el componente mismo cuando se desmonta, debe decidir dónde más debe guardarse.

Estas son tus opciones:

1. Estado de reacción en el padre : si un componente principal permanece montado, tal vez debería ser el propietario del estado o podría proporcionar un estado inicial a un componente no controlado a continuación. Puede volver a pasar el valor antes de que se desmonte el componente. Con el contexto React, puede elevar el estado a la parte superior de su aplicación (ver, por ejemplo, no declarado ).
2. Fuera de React : por ejemplo , use-local-storage-state . Tenga en cuenta que es posible que deba restablecer manualmente el estado entre pruebas. Otras opciones son parámetros de consulta en la URL, bibliotecas de gestión de estado como MobX o Redux, etc.

Si está buscando una solución fácil en la que los datos se mantengan fuera de React, este Hook podría ser útil:

 const memoryState = {}; function useMemoryState(key, initialState) { const [state, setState] = useState(() => { const hasMemoryValue = Object.prototype.hasOwnProperty.call(memoryState, key); if (hasMemoryValue) { return memoryState[key] } else { return typeof initialState === 'function' ? initialState() : initialState; } }); function onChange(nextState) { memoryState[key] = nextState; setState(nextState); } return [state, onChange]; }

Uso:

 const [todos, setTodos] = useMemoryState('todos', ['Buy milk']);

ESTÁ BIEN. Entonces, después de hablar con un grupo de personas, resulta que no hay forma de guardar una instancia de un componente. Por lo tanto, TENEMOS que guardarlo en otro lugar.

1) El lugar más obvio para guardar el estado es dentro del componente principal.

Esta no es una opción para mí porque estoy tratando de enviar y abrir vistas desde un objeto similar a UINavigationController.

2) Puede guardar el estado en otro lugar, como una tienda Flux, o en algún objeto global.

Esta tampoco es la mejor opción para mí porque sería una pesadilla hacer un seguimiento de qué datos pertenecen a qué vista en qué controlador de navegación, etc.

3) Pase un objeto mutable para guardar y restaurar el estado.

Esta fue una sugerencia que encontré al comentar en varios tickets de emisión en el repositorio Github de React. Este parece ser el camino a seguir para mí porque puedo crear un objeto mutable y pasarlo como accesorios, luego volver a renderizar el mismo objeto con el mismo accesorio mutable.

De hecho, lo he modificado un poco para que sea más generalizado y estoy usando funciones en lugar de objetos mutables. Creo que esto es más sensato: los datos inmutables siempre son preferibles para mí. Esto es lo que estoy haciendo:

 function createInstance() { var func = null; return { save: function(f) { func = f; }, restore: function(context) { func && func(context); } } }

Ahora en getInitialState estoy creando una nueva instancia para el componente:

 component: <StatefulView instance={createInstance()}/>

Luego, en StatefulView , solo necesito guardar y restaurar en componentWillMount y componentWillUnmount .

 componentWillMount: function() { this.props.instance.restore(this) }, componentWillUnmount: function() { var state = this.state this.props.instance.save(function(ctx){ ctx.setState(state) }) }

Y eso es. A mí me funciona muy bien. Ahora puedo tratar los componentes como si fueran instancias :)

Para aquellos que solo están leyendo esto en 2019 o más allá, ya se han dado muchos detalles en las otras respuestas, pero hay un par de cosas que quiero enfatizar aquí:

• Guardar estado en alguna tienda (Redux) o Contexto es probablemente la mejor solución.
• El almacenamiento en una variable global solo funcionará si solo hay UNA instancia de su componente a la vez. (¿Cómo sabrá cada instancia qué estado almacenado es el suyo?)
• Guardar en localStorage tiene las mismas advertencias que la variable global, y dado que no estamos hablando de restaurar el estado en la actualización del navegador, no parece agregar ningún beneficio.