reactjs / reactjs/react.dev

When would we use "useImperativeHandle" in ReactJs' hooks?

Aberta
#2,615 0 comentários 4 reações 0 responsáveis Ver no GitHub

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. useImperativeHandle should be used with forwardRef.
Does this means it is good practice to use useImperativeHandle with forwardRef ? When would we use useImperativeHandle typically?
More specifically, in this discussion on stackoverflow about how calling child's methods from parents , someone provided this answer which propose to use useImperativeHandle . Then some comments argued that this is not good practice:

This is not really a good pattern. {...} It's better to pass props into the child component and then have a button click in the parent change the parent's state, and pass a state item into the child which will trigger the child's componentWillReceiveProps, 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 useImperativeHandle with forwardRef ?

  • When would we use useImperativeHandle typically?

  • Can we, or not, safely use useImperativeHandle for the convenience of easily communicate properties and methods to 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

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. 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

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.