O estado das coisas

Esta semana, recebi alguns comentários valiosos sobre como crescer como desenvolvedor – e isso é voltar ao básico. Eu tenho trabalhado com o React como uma biblioteca Frontend, e um dos recursos mais importantes do React e de qualquer biblioteca Frontend é o gerenciamento de estado. Existem várias maneiras de gerenciar o estado. Neste blog, revisarei três métodos diferentes para fazer isso: useState, Redux e useContext.

State é um dos três principais recursos do React: state, components e props. O estado é definido como “um objeto embutido… que permite que os componentes criem e gerenciem seus próprios dados” ( Egyi ). Gosto de pensar no estado como um objeto que acompanha como um usuário interage com um componente e, com base nesse comportamento, pode renderizar ou exibir determinadas informações.

useState

O primeiro método de gerenciamento de estado é useState, um popular React Hook. Este gancho “permite que você tenha variáveis ​​de estado em componentes funcionais” (LogRocket). useState “retorna um valor de estado e uma função para atualizá-lo” ( ReactJS ). Este Hook utiliza gerenciamento de estado local. Para manter o estado e permitir que outros componentes tenham acesso a ele, você precisa passá-lo como adereços. useState pode mudar na nova renderização.

import {useState} from 'react'
export default function WelcomePage(){
  const [counter, setCounter] = useState(0)
  const increaseCounter = () => {
    setCounter(counter +1)
  }
return (
    <div>
       <h3>I've clicked on this button {counter} times</h3>
       <button onClick={increaseCounter}>Click here</button>
    </div>
  )
}

Eu escrevi sobre useContext anteriormente, mas useContext é outro React Hook. Ao contrário de useState, useContext é usado para gerenciar e manter o gerenciamento de estado global. Depois que algo é atribuído a useContext, você pode importar useContext em qualquer componente. O benefício do gancho useContext é que isso não mudará na nova renderização porque está definido globalmente.

import {useContext} from 'react'
export const UserContext = React.createContext()
export default function WelcomePage(){
const [userInfo, setUserInfo] = useState([])
const fetchAPI = () => {
    fetch('https://localhost:3000/[your route here]')
      .then(response => response.json())
      .then(data => {
         setUserInfo(data)
           return data
       })
  }
return (
    <UserContext.Provider
       value={{fetchAPI}}
    >
{/* other data here */ }
</UserContext.Provider>
  )
}

Redux é uma biblioteca React criada para gerenciar o estado. Ele é definido como “um contêiner de estado previsível projetado para ajudá-lo a escrever aplicativos JavaScript que se comportam de forma consistente em ambientes cliente, servidor e nativos e são fáceis de testar” ( Ighodaro ). O estado é mantido por meio de uma loja e você pode designar quais componentes em seu aplicativo têm acesso ao estado — e quais podem alterar o estado, usando redutores e ações.

Há muitos benefícios em usar o Redux: é fácil de depurar, torna o estado mais previsível e é útil se você precisar que seu aplicativo seja dimensionado. No entanto, não é necessário para todos os aplicativos React. De fato, Dan Abramov, co-autor do Redux, disse isso: “ Volte ao Redux se você encontrar uma necessidade real ou se quiser tentar algo novo. Mas aborde com cautela, assim como você faz com qualquer ferramenta opinativa ”.

Confira os recursos abaixo para saber mais sobre o gerenciamento do estado.

Recursos

Você pode não precisar de Redux