DEV Community: judsonkerller

Finite State Machines no React: Gerenciado Estados de Forma Elegante

judsonkerller — Mon, 07 Apr 2025 21:07:27 +0000

Gerenciar estados complexos no React pode rapidamente se tornar um desafio, especialmente quando lidamos com múltiplas transições e regras de fluxo. Uma abordagem poderosa para resolver esse problema é o uso de Finite State Machines (FSMs), que ajudam a estruturar estados e transições de maneira previsível e fácil de manter.

Neste artigo, vamos explorar o conceito de FSMs, entender como elas podem melhorar nosso código e criar uma implementação prática sem o uso de bibliotecas externas.

O que são Finite State Machines?

São modelos matemáticos que definem um sistema baseado em estados finitos e suas transições. De forma simples, um componente pode estar em um único estado por vez e só pode mudar para um novo estado através de uma transição definida.

Vamos usar uma situação em que temos uma interface que nela contém um componente de card que faz uma requisição para uma api que retorna os dados para serem exibidos:

Estado 1: erro (em casos que a api falha)
Estado 2: carregando
Estado 3: sucesso

As transições entre os estados estão bem definidas:

Se a requisição falhar, mudamos para erro e podemos exibir uma mensagem de erro.
Em caso de não falha, mudamos o estado para carregando.
Se a requisição for bem-sucedida, mudamos para sucesso e exibimos os dados.

Essa previsibilidade evita estados inesperados e facilita a manutenção do código.

Visualizando a FSM

A imagem abaixo ilustra a máquina de estados finitos para esse cenário de busca:

Quais os benefícios de usarmos as FSMs no React?

✅ Previsibilidade: Cada estado e transição são claramente definidos, reduzindo erros inesperados.
✅ Facilidade de Depuração: Como todas as mudanças de estados são controladas, fica mais fácil de entender e depurar bugs.
✅ Melhoria na Manutenção: Componentes tornam-se mais organizados, facilitando a leitura e evolução do código.
✅ Melhor Controle de Fluxo: Evita estados inválidos, garantindo que o componente sempre esteja em uma condição válida.

Implementando uma FSM no React com useReducer!

Aqui está um componente aonde utilizamos o useReducer para controlar os estados:

import { useEffect, useReducer } from "react";
import { reducer } from "../utils/reducer";
import { ACTIONS, STATES } from "../utils/constants";
import './DataCard.css';

const DataCard = () => {
  const [state, dispatch] = useReducer(reducer, STATES.LOADING);

  useEffect(() => {
    if (state === STATES.LOADING) {
      const timeout = setTimeout(() => {
        fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then((response) => {
          if (!response.ok) throw new Error('Failed to fetch');
          return response.json();
        })
        .then(() => dispatch(ACTIONS.SUCCESS))
        .catch(() => dispatch(ACTIONS.ERROR));
      }, 2000);

      return () => clearTimeout(timeout);
    }
  }, [state]);

  return (
    <div className='card'>
      {state === STATES.LOADING && <div className="loading">Loading card...</div>}
      {state === STATES.SUCCESS && (
        <div className='success'>
          <h2>FSMs</h2>
          <p>Simulated API content (request successful)</p>
          <button onClick={() => dispatch(ACTIONS.LOAD)}>Reload</button>
        </div>
      )}
      {state === STATES.ERROR && (
        <div className='error'>
          <p>Error loading data!</p>
          <button onClick={() => dispatch(ACTIONS.LOAD)}>Try again</button>
        </div>
      )}
    </div>
  );
};

export { DataCard };

Teste na Prática!

Quer ver o conceito de FSMs funcionando na prática? Criei um repositório para que você possa clonar e testar por conta própria. Acesse o repositório no GitHub e siga as instruções:
🔗 Repositório FSM React

git clone https://github.com/judsonkerller/fsm-react.git
cd fsm-react
npm install
npm start

Experimente fazer alterações no código e observe como os estados e transições são gerenciados!

Conclusão

Finite State Machines são uma ferramenta poderosa para gerenciar estados de forma estruturada no React. Com bibliotecas como o XState ou implementações manuais usando useReducer, podemos tornar nosso código mais previsível, modular e fácil de testar.

E aí, já usou FSMs em seus projetos? Se sim, como foi a experiência? Se não, pretende experimentar? Me conta nos comentários! 🚀

Criação de Hooks Personalizados no React: Reutilização de Lógica de Forma Inteligente

judsonkerller — Mon, 03 Feb 2025 00:37:15 +0000

Se você já trabalhou em projetos React, provavelmente percebeu que algumas lógicas são repetidas em diferentes componentes. Isso pode tornar o código menos manutenível e mais propenso a erros.
Imagine que você precise implementar um comportamento de debounce em múltiplos componentes para otimizar chamadas a uma API. Em vez de copiar e colar o mesmo código, você pode criar um custom hook (hook personalizado), centralizando a lógica e reaproveitando-a de forma elegante.

No nosso papo de hoje, vamos explorar o conceito de custom hooks, como criá-los, boas práticas, como vivem, o que comem (essas duas últimas foram zueira pessoal rsrs), e um exemplo real de um hook de debounce. Então pegue seu cafézin e rumbora aprender mais sobre hooks.

O que são Hooks Personalizados?

São funções JavaScript que utilizam os hooks padrões do React para encapsular e reutilizar lógica compartilhada entre componentes. Eles seguem a convenção de nome começando com "use" ("useDebounce").
Eles permitem separar preocupações, melhorar a legibilidade e reduzir redundância no seu código.

Criando um Hook Personalizado: useDebounce

Vamos criar um hook que atrasa a execução de uma função até que o usuário pare de digitar por um tempo determinado.

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debounceValue, setDebounceValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
     setDebounceValue(value);
    }, delay)

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debounceValue;
}

export { useDebounce };

Agora, podemos usar o hook personalizado que acabamos de criar, dentro de um componente para otimizar chamadas a uma API de pesquisas, sem que seja feito uma chamada a cada vez que o usuário digitar algo no input, por exemplo.

import { useState } from "react";
import useDebounce from "./useDebounce";

function SearchInput() {
  const [searchTerm, setSearchTerm] = useState("");
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      console.log("Buscando por:", debouncedSearchTerm);
      // Aqui você pode chamar uma API, por exemplo
    }
  }, [debouncedSearchTerm]);

  return (
    <input
      type="text"
      placeholder="Digite sua pesquisa..."
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
}

Boas práticas ao criar Hooks Personalizados

Nomeie corretamente: Comece sempre com o use para garantir que o React reconheça como um hook.
Evite dependências desnecessárias: Utilize apenas os estados e useEffect's se realmente forem necessários para evitar re-renderizações inesperadas.
Mantenha genérico e reutilizável: Evite hardcodes dentro do hook. Prefira passar valores via props.
Escreva testes para seus hooks: Utilize Jest e React Testing Library para validar o comportamento esperado.

Extra: Adote a prática de por testes em todo código que você fizer, pois assim você garante o funcionamento para o qual o mesmo foi criado.

Pra finalizarmos, os hooks personalizados são uma forma poderosa de organizar e reutilizar lógica dentro do React. No exemplo que vimos hoje, transformamos uma lógica repetitiva em um hook que podemos utilizar em diversos componentes que aguardam esse comportamento, e ficou bem estruturado, falaê!? rsrs

Se você quiser se aprofundar, tente criar outros hooks personalizados, observe no seu dia a dia alguma lógica que se repete no projeto que você esteja atualmente e tente implementar - se possível, claro, dependendo do time e contexto que você esteja inserido - garanto que isso só vai trazer benefícios para você e principalmente pro seu time.

Curtiu o artigo? Curtiu o papo? Que outro hook personalizado você gostaria de ver? Deixe seu comentário!🚀