When would we use "useImperativeHandle" in ReactJs' hooks?
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 11.8k
- Forks
- 7.9k
- Merge medio
- 1 d 11 h
- PR fusionados (30 d)
- 11
Descripción
I am trying to understand what ReactJs' team expects from developers when using the useImperativeHandle's method. Currently the documentation indicates that:
imperative code using refs should be avoided in most cases.
useImperativeHandleshould be used with forwardRef.
Does this means it is good practice to useuseImperativeHandlewithforwardRef? When would we useuseImperativeHandletypically?
More specifically, in this discussion on stackoverflow about how calling child'smethodsfrom parents , someone provided this answer which propose to useuseImperativeHandle. Then some comments argued that this is not good practice:
This is not really a good pattern. {...} It's better to pass
propsinto the child component and then have a button click in the parent change the parent'sstate, and pass astateitem into the child which will trigger the child'scomponentWillReceiveProps, and use that as a trigger.
No, it's not usually the best pattern, it's more of an escape hatch when you need it, and should be used only in emergencies.{...}
I would we make the things limpid for everyone, so here my specifics questions:
-
Is it good practice to use
useImperativeHandlewithforwardRef? -
When would we use
useImperativeHandletypically? -
Can we, or not, safely use
useImperativeHandlefor the convenience of easily communicatepropertiesandmethodsto the childs' parents? -
Why the documentation say that imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef.?
-
What are the information to know to make an educated decision about the usage of
useImperativeHandle? -
lastly, is it safer, safe, and even a good practice to use the
useEffect's method to communicate element to parents, like in the following demo, here a relevant's snippet:
useEffect(() => {
ref.current = { componentState }; // get a forwardRef's reference, then transmit some state to parent by modifying the reference
validateChildren(ref.current.componentState.two);
});
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
No se especifica ningún archivo del repositorio ni ninguna prueba. Empieza revisando la documentación de useImperativeHandle y forwardRef, la discusión enlazada de Stack Overflow y el ejemplo de StackBlitz para determinar la orientación prevista. Se considerará terminado cuando las preguntas indicadas queden resueltas con documentación clara y precisa sobre el uso apropiado y las alternativas.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react
- Área
- documentation
- Tipo de issue
- Documentación
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 25/100