Tengo un componente de movimiento de enmarcador (también lo he probado con componentes de Stitches ) que anima hacia y desde la vista en función de una variable useState:
const [visible, setVisible] = useState(true); <motion.div animate={visible ? "one" : "two"} variants={{ one: { transform: "translateX(0%)", opacity: 1 }, two: { transform: "translateX(100%)", opacity: 0 } }} > // children </motion.div>Los componentes secundarios están envueltos en contextos y el problema es que sus estados se restablecen cada vez que se activa la animación.
Intenté declarar el componente de animación fuera de su alcance actual. En su alcance actual, restablece los estados de todo excepto el estado "currentUser" en mi contexto AuthProvider. Fuera del alcance, también restablece "currentUser". He decidido no incluir el código original por brevedad.
Aquí hay un mínimo reproducible. Si escribe algo en la entrada y luego hace clic en el botón de alternancia, la entrada se pierde.
DummyInputComponent debe ser sin estado, usar el valor proporcionado por el contexto y también tener una función de controlador onChange pasada desde el contexto
Algo como esto:
export function AuthProvider({ children }) { const [dummyValue, setDummyValue] = useState(null); const handlechange = (e) => { setDummyValue(e.target.value); }; const value = { dummyValue, onChange: handlechange }; const DummyInputComponent = () => { return <input value={value.dummyValue || ""} onChange={value.onChange} />; }; return ( <AuthContext.Provider value={value}> <DummyInputComponent /> </AuthContext.Provider> ); }Sé que el caso de uso común para esto es para ajustar el rendimiento, pero terminé evitando las reproducciones causadas por el movimiento del marco (supuestamente) al usar la memorización:
const Memoized = React.memo(({ children }) => { const [visible, setVisible] = useState(true); return ( <motion.div animate={visible ? "one" : "two"} variants={{ one: { transform: "translateX(0%)", opacity: 1 }, two: { transform: "translateX(100%)", opacity: 0 } }} > {children} </motion.div> ); });No sé si esta es una buena manera de hacerlo, así que lo dejaré abierto.