Managing state in React applications is a fundamental aspect of developing dynamic and interactive interfaces. This article goes into more detail and practical examples of state management in React, highlighting best practices and effective strategies.

Local State with Hooks

React Hooks have revolutionized state management in functional components. We'll explore two fundamental Hooks: useState and useEffect.

useState: Fundamentals and Example

useState is the basic Hook for creating state in a functional component. For example, in a counter component:

import React, { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>Clique aqui</button>
    </div>
  )
}

Neste exemplo, useState é usado para rastrear o número de cliques. count é o valor atual do estado, e setCount é a função que atualiza o estado.

useEffect: Gerenciando Efeitos Colaterais

useEffect é usado para realizar operações que não são possíveis no render, como chamadas de API ou subscrições. Por exemplo, para buscar dados de uma API:

import React, { useState, useEffect } from 'react'

function UserData() {
  const [user, setUser] = useState(null)

  useEffect(() => {
    async function fetchUserData() {
      const response = await fetch('https://api.user.com')
      const userData = await response.json()
      setUser(userData)
    }

    fetchUserData()
  }, []) // O array vazio indica que o efeito será executado apenas uma vez

  return <div>{user ? <p>Olá, {user.name}</p> : <p>Carregando...</p>}</div>
}

Gerenciamento de Estado Global

Em aplicações maiores, você pode precisar compartilhar estado entre vários componentes.

Context API: Compartilhando Estado

A Context API permite passar dados através da árvore de componentes sem ter que passar props manualmente em cada nível. Por exemplo, um tema compartilhado:

import React, { useContext, createContext, useState } from 'react'

const ThemeContext = createContext()

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('claro')

  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>
}

function Button() {
  const { theme, setTheme } = useContext(ThemeContext)

  return (
    <button onClick={() => setTheme(theme === 'claro' ? 'escuro' : 'claro')}>
      Alterar para tema {theme === 'claro' ? 'escuro' : 'claro'}
    </button>
  )
}

Leia em mais detalhes como a Context API funcionam aqui: Gerenciando um Carrinho de Compras com a Context API.

Redux: Gerenciamento de Estado Avançado

Redux oferece uma solução robusta para gerenciar estados complexos e grandes fluxos de dados. Por exemplo, em um sistema de carrinho de compras:

// actions.js
export const addToCart = (item) => {
  return {
    type: 'ADD_TO_CART',
    payload: item,
  }
}

// reducer.js
const cartReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TO_CART':
      return [...state, action.payload]
    default:
      return state
  }
}

// CartComponent.jsx
import { useDispatch, useSelector } from 'react-redux'
import { addToCart } from './actions'

function CartComponent() {
  const dispatch = useDispatch()
  const cart = useSelector((state) => state.cart)

  const handleAddToCart = (item) => {
    dispatch(addToCart(item))
  }

  // JSX that shows the cart and allows you to add items
}

Read in more detail how Redux works here: User Session Management using Redux.

Conclusion

Managing state in React requires a clear understanding of the tools and techniques available. Whether using useState and useEffect for local state or adopting Context API and Redux for complex, global state, each approach has its advantages and use cases. The key is to understand the specific needs of your application and apply the most appropriate solution, keeping the code organized, testable and easy to maintain.

Don't forget to follow me on Twitter or LinkedIn to find out about any new articles or insights.