10
votos
Aceito
O que são React Hooks?
Existem 4 tipos de Hooks:
State Hook
Effect Hook
Custom Hook
Other Hook (Hooks nativos com funções específicas)
Resumindo:
"When would I use a Hook? If you write a function component and realize ...
10
votos
Qual é a diferença entre os hooks useMemo e useCallback do React?
A diferenças das duas é que a useCallback não é executada no render enquanto a useMemoé.
Isso cria a possibilidade de "guardar" a função para ser utilizada apenas por callbacks por exemplo, como o ...
9
votos
Aceito
React Hook useEffect has a missing dependency: .... Either include it or remove the dependency array react-hooks/exhaustive-deps
O problema aqui, é que não fica claro usar métodos externos dentro do evento do useEffect, pois será mais complicado de mapear o que efeito precisa de informações para ser executado.
Todas variáveis ...
7
votos
Aceito
Como posso mudar somente uma propriedade de um objeto usando o hook useState
Você pode utilizar o spread operator na hora de atualizar o valor no State. Ficaria da seguinte forma:
setValue(prevState => {
return { ...prevState, value1: "novo valor" }
});
Desta forma, o ...
7
votos
Aceito
Como colocar objetos em array vazio com React Hooks
O problema é que você inicializa data como um array que já está com o primeiro elemento preenchido. No caso, por um objeto literal "vazio":
const [data, setData] = useState([{}]);
// ...
6
votos
O que são React Hooks?
O que são Hooks?
Hooks são um conjunto de novas funcionalidades que dentre outras coisa permitem ao desenvolvedor controlar o state de uma forma mais simples, mais rápida e mais intuitiva.
Sua ...
6
votos
Aceito
Os "Class Components" morreram no React?
TLDR: As classes não vão morrer. (ao menos, não tão cedo).
Como já foi respondido aqui, a documentação cita que não há planos para remover classes do React. Porém a documentação traz diversos outros ...
6
votos
Aceito
Qual é a diferença entre os hooks useMemo e useCallback do React?
A única coisa que ambos os hooks possuem em comum é de que retornam algo memoizado. Apesar disso ser o suficiente para confundir a funcionalidade de ambos, ao longo da resposta ficará bem claro quais ...
6
votos
Aceito
State retornando valor errado / atrasado
O setState é assíncrono
Esse é o comportamento esperado.
Chamadas ao setState são assíncronas, o React busca realizar uma atualização em lote (batch) para causar menos renderizações.
Tendo em vista ...
3
votos
Qual é a diferença entre os hooks useMemo e useCallback do React?
Uma boa forma de entender a diferença entre useMemo e useCallback é ver que é possível reproduzir o useCallback utilizando um useMemo.
Exemplo:
const useCallback = useCallback(() => console.log('...
3
votos
Aceito
Como alternar o estado de apenas um item no FlatList?
Consegui resolver, é só criar um componente separado e chamar esse componente no rendeItem do flatlist passando as props
FlatList:
const Sounds: React.FC = () => {
return (
<Container>
...
3
votos
Aceito
Problema ao tipar primeiro parametro do setState do React
Isso acontece porque o setState é muito mais do que uma simples função que retorna somente um booleano. Nas variáveis do useState, o segundo elemento (mudarExecucao) é uma função do tipo Dispatch<...
3
votos
Aceito
Como usar o hook do React useRef com o componente NumberFormat?
De acordo com a documentação do próprio componente, como ref é uma propriedade especial do React, você está pegando a referência do componente NumberFormat, e não do input.
Para pegar a referência do ...
3
votos
Aceito
Como adicionar novo objeto em posição especifica de array useState Hooks
Utilizando map para interar em cada item do seu array e o filtro que vai trazer os dados filtrados do outro array pode montar a estrutura como demonstrado na pergunta, exemplo:
function App() {
...
3
votos
Aceito
React Hook useEffect has a missing dependency: 'storeInfo'
const [storeInfo, setStoreInfo] = useState(null);
useEffect(()=>{
const loadAll = async () => {
let chosenInfo = await Tmdb.getStoreById(635302);
setStoreInfo(chosenInfo);
...
3
votos
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop
Acredito que seu problema esteja nesse trecho do componente CardAnime.
if(anime){
setGeneros(anime.genero.split(","));
if (generos.length > 3) {
while (generos.length > ...
3
votos
Aceito
Como otimizar a renderização em componentes funcionais no React?
Otimizar a performance do app é um assunto muito extenso. O título da pergunta diz respeito a otimizar a renderização, e isso pode ser levado para duas interpretações: evitar uma renderização ...
3
votos
Aceito
Como usar componentDidMount, componentWillUnmount e declarar o estado inicial em componentes funcionais?
Hooks
Você substituirá as funções de ciclo de vida por hooks. O estado também. Por isso, leia O que são React Hooks? caso tenha alguma dúvida sobre eles de maneira geral.
useEffect
O hook useEffect ...
3
votos
Aceito
Loop de Requisições no useEffect
Seu problema esta na lista de dependências do seu useEffect, veja que você passa lista no array de dependências, e internamente você atualiza esse estado após a requisição ser completa, fazendo isso ...
3
votos
Aceito
Como sobrescrever o type "string" do localstorage para um outro type com typescript?
Lembre-se que o TypeScript não consegue garantir, só a partir de uma definição de tipos, que um valor de fato terá aquele tipo.
Voltemo-nos ao seu tipo Themes:
type Themes = 'light' | 'dark';
Veja ...
2
votos
Aceito
React Native: O componente não encontra dados de um state após um setState
Não entendi muito bem, mas pq vc joga isso em um array se é um unico objeto ?
Se forem diversos objetos em um array, não tem como pegar usando
user.name
Se for um unico objeto retornando,vc nao ...
2
votos
UseDispatch() dentro de um useEffect() -> *missing dependency*
O alerta é dado pois a função dispatch não está no array de dependência do useEffect.
Para solucionar precisa deixar desta forma
useEffect(() => {
dispatch(ACTION.CARREGAR())
}, [dispatch])...
2
votos
Aceito
Duvida sobre padrão classe React
Minha duvida é, porque o React não cria a estrutura padrão como abaixo?
Deve estar usando a versão mais recente do reactjs(Versão: >=16.8) que apresenta os Hooks. A grande motivação para essa ...
2
votos
O que são React Hooks?
O que são hooks?
Hooks são funções, por isso variam tanto entre si. Alguns retornam um objeto, outros retornam um array, uma função ou nada. Cada hook terá sua responsabilidade, inclusive você pode ...
2
votos
Aceito
Como usar "shouldComponentUpdate" com Hooks?
Nesses casos, você pode utilizar a API React.memo, uma higher order function. Da documentação:
Se seu function component renderiza o mesmo resultado dados os mesmos props, você pode envolver nele uma ...
2
votos
Refresh de Token JWT
Olá sugiro fazer uma PrivateRoute, assim a cada rota chamada no routes passaria por essa PrivateRoute e la dentro tu chamaria um metodo para renovar o token.
import { Route, Redirect } from "react-...
2
votos
Aceito
Ajuda com API/useEffect - React
O estado está sendo provavelmente alterado sim. O problema é que você está executando o console.log antes dele ser alterado.
O processo de alteração de estado no React é assíncrono. Além disso, como ...
2
votos
Aceito
Erro no useEffect ao acessar dados da API
Baixei o seu projeto e tentei debuggar esse problema. Como não tenho acesso ao banco, o app não starta e meu diagnóstico pode não estar 100% correto, mas aqui temos as seguintes possíveis causas:
...
2
votos
Aceito
React Native useState criar input com loop
Nesse caso eu usaria o useState para armazenar um objeto com os valores dos inputs, e outro para armazenar o objeto de ItensMenu. Fiz um código de exemplo, fiz uma mistura de inglês com portugês, mas ...
2
votos
Aceito
useState não funciona como o esperado
As atualizações dos estados dos componentes não é tão simples como parece, são assíncrono, em resumo demora um tempo para acontecer e as variáveis com os novos estados precisam ser vigiadas para tomar ...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
react-hooks × 174react × 146
javascript × 81
react-native × 44
typescript × 14
react-dom × 13
axios × 10
api × 9
node.js × 8
array × 6
react-router × 5
localstorage × 4
redux × 4
componentes × 4
front-end × 3
promises × 3
expo × 3
react-router-dom × 3
css × 2
json × 2
objetos × 2
tipagem × 2
assincronismo × 2
react-navigation × 2
material-ui × 2