When would we use "useImperativeHandle" in ReactJs' hooks?
Ninguém assumiu esta issue ainda.
- Linguagem predominante
- JavaScript
- Estrelas
- 11.8k
- Forks
- 7.9k
- Merge médio
- 1d 11h
- PRs com merge (30d)
- 11
Descrição
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);
});
Guia de contribuição
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Direção de pesquisa
Nenhum arquivo do repositório ou teste é especificado. Comece revisando a documentação de useImperativeHandle e forwardRef, a discussão vinculada do Stack Overflow e o exemplo do StackBlitz para determinar a orientação pretendida. Considera-se concluído quando as perguntas listadas forem resolvidas com uma documentação clara e precisa sobre o uso apropriado e as alternativas.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- javascript, react
- Domínio
- documentation
- Tipo de issue
- Documentação
- Dificuldade
- 5/5
- Tempo estimado
- Mais de uma semana
- Status de atividade
- Estagnada
- Clareza
- Precisa de esclarecimento
- Facilidade para iniciantes
- 25/100