Custom hook example has missing dependency

Aberta Para iniciantes
#3,937 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
1/5
Tempo estimado
Menos de uma hora
Facilidade para iniciantes
70/100
Tipo de issue
Documentação
Clareza
Claramente especificada
Status de atividade
Estagnada
Stack de tecnologia
javascript, react
Domínio
documentation

Direção de pesquisa

Abra content/docs/hooks-custom.md e inspecione o exemplo de useFriendStatus() próximo à linha 91. Atualize a lista de dependências do exemplo conforme descrito e, em seguida, verifique se a documentação é renderizada corretamente e se o exemplo mostra a dependência pretendida.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

Regarding 'Building Your Own Hook' page (github link).

Small but critical mistake in custom hook example for function useFriendStatus(). It needs a dependency. I.E.
Change line 91 by inserting , [friendID].

Without the dependency this appears to be 'magic'. I found I had to add a dependency when writing my learning hook, otherwise my counter just spins indefinitely.

Example
Custom hook:

function useCounter(targetId: string) {
    const [counter, setCounter] = useState(0);
    
    useEffect(() => {
        setCounter(counter+1);
    }, [targetId]);
    
    return counter;
}

Client code:

interface MainProps {
    counterTargetId: string;
}

export default function MainPage(props: MainProps = {
    counterTargetId: 'a',
}) {

    const currentCount = useCounter(props.counterTargetId);
    
    return (<div>
        <p>
            Count: {currentCount}
        </p>
    </div>);
}

function App() {
    const [targetId, setTargetId] = useState('a');
  return (
    <div className="App">
        <input
            type="button"
            value="Toggle"
            onClick={() => setTargetId(targetId === 'a' ? 'b' : 'a')}/>

        <MainPage counterTargetId={targetId}/>
    </div>
  )
}
Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
16h 6min
PRs com merge (30d)
7

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.

Mais de reactjs/react.dev

Todas as issues de reactjs/react.dev

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

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