Tengo un componente compuesto que se usa para construir un montón de pantallas diferentes (pero similares) en una aplicación nativa de reacción. Los datos provienen de un CMS y, según el valor de un accesorio llamado type , debe tener diferentes variables de estado, validación diferente, etc. Escribí un objeto de configuración cuyos métodos se asignan a los valores de type y contienen el estado y funciones necesarias para cada caso de uso. El patrón se ve así (editado por ejemplo):
import { useState } from 'react'; const MyComponent = props => { const { type } = props; // possible values of type are 'A', 'B', 'C' const config = { A() { const [value, setValue] = useState(''); function onChange({ target }) { setValue(target.value); } return { value, onChange } }, B() { // ... return { value: '', onChange: () => {} } }, C() { // ... return { value: '', onChange: () => {} } } }[type](); return <input value={config.value} onChange={config.onChange} /> }; export default MyComponent;¡PERO!
En los documentos de reacción dice esto:
No llame a Hooks dentro de bucles, condiciones o funciones anidadas.
Mi pregunta es: ¿el ejemplo anterior viola las reglas de los ganchos? Parece funcionar para lo que necesito, pero sospecho que puede causar problemas. Apreciaría cualquier pensamiento/discusión. ¡Salud!
Respuesta corta: sí.
Respuesta larga:
React depende de que los ganchos se llamen exactamente en el mismo orden entre los renderizados (creo que internamente los ganchos se almacenan en una lista vinculada, que se modifica al montar y desmontar el componente, si el orden cambia entre los renderizados sin montar y desmontar, React no tiene forma de saber qué gancho pertenece a qué componente).
Debido a que su representación desde un CMS, es poco probable que el valor de type cambie entre las representaciones, por lo que probablemente nunca tendrá problemas con este caso de uso en particular, pero es un mal hábito, y es casi seguro que hay una una mejor manera de manejar lo que está tratando de hacer. ¿Quizás escribir un gancho que tome el tipo como argumento?
function useMyHook(type:string) { const [state, setState] = useState(''); const onChange = useMemo(() => { if (type = 'A') return () => doXyz() }, [type]) return {state, onChange} }Esto es artificial, pero con suerte lo hará pensar en enfoques alternativos para su problema.