3

Aprendi a alterar dessas duas formas:

const [switch, setSwitch] = useState(false);

setSwitch(!switch);                         // 1
setSwitch(currentState => !currentState);   // 2

Há alguma diferença? Sei que da 2ª forma ele retorna o estado exato mais "fiel" do que da 1ª forma. Há algum problema em usar da 1ª forma?

6
  • 1
    Não sei o porque do negativo, porque realmente existe diferença! aqui eu parei de responder alguns questionamento por causa disso, a falta de conhecimento alinhado com os votos negativos ...!
    – novic
    Commented 20/11/2022 às 15:00
  • E qual é a diferença? Commented 20/11/2022 às 15:06
  • 3
    @BernardoLansing: codesandbox.io/s/react-fiddle-forked-f6r4vr?file=/src/App.js dá uma olhada nesse código e verifique que há diferença de como você faz, falta algum contexto na pergunta talvez, mas, é real que existe diferença! e isso impacta em muito no desenvolvimento, tem dois botões eles se comportam diferente na atualização da variavel number
    – novic
    Commented 20/11/2022 às 15:24
  • 1
    @novic, me surgiu uma dúvida relacionada codesandbox.io/s/react-fiddle-forked-3ugn0t , se for passado um IIFE o comportamento é mesmo que setNumber(number + 1); no sandbox e setSwitch(!switch); na pergunta. Commented 21/11/2022 às 4:35
  • 1
    @AugustoVasques sim, é engraçado esse comportamente porque eu sinceramente é a primeira vez que eu vi esse tipo de expressão em conjunto (não sei se é expressão). mas, de certa forma parece que está sendo passado a ultimo valor e ai recai no que você mesmo relatou que o comportamento é o mesmo que o valor + 1. Vale salientar que existem momentos que precisa se alterado na mesma função o valor varias vezes de algum estado e isso com a solução que eu passei fica próximo a vida real. (comportamento)
    – novic
    Commented 21/11/2022 às 15:11

1 Resposta 1

1

Sim, faz diferença.

O primeiro setSwitch(!switch) é usado para inverter o valor atual do switch e atualizar o estado do componente. Isso é feito através do operador de negação (!), que inverte o valor de switch.

O segundo setSwitch(currentState => !currentState) também é usado para inverter o valor atual do switch, mas ele faz isso usando uma função que recebe o estado atual como parâmetro e retorna o novo valor para o estado. Isso é útil quando você precisa basear o novo valor do estado em seu valor atual, mas também pode ser usado como um meio de garantir que o componente só atualize o estado com o valor correto.

Em resumo, ambos os setSwitch são usados para inverter o valor do switch, mas o segundo faz isso de forma mais controlada e segura, pois garante que o novo valor do estado é baseado no valor atual e não em qualquer outra fonte.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .