DEV Community: Gustavo Priebe

Compreendendo como os Manipuladores de Eventos funcionam no React

Gustavo Priebe — Mon, 24 Jul 2023 18:16:40 +0000

O React, sendo uma biblioteca popular e poderosa de JavaScript para construção de interfaces de usuário, oferece uma ampla gama de manipuladores de eventos incorporados que facilitam o tratamento de interações do usuário. Um manipulador de evento permite que os desenvolvedores anexem uma função que é executada em resposta a um evento sendo acionado, como clicar em um botão, passar o mouse sobre um elemento, digitar em um campo de entrada ou redimensionar a janela.

Neste artigo, abordaremos três etapas fundamentais do tratamento de eventos (event handling) no React, que são cruciais para gerenciar efetivamente eventos em suas aplicações: definir a função do manipulador, vincular eventos aos elementos e acionar os eventos. Ao final deste artigo, você terá uma compreensão sobre a manipulação de eventos no React, incluindo os diversos tipos de eventos existentes.

Etapas do Tratamento de Eventos

Para lidar efetivamente com eventos no React, os desenvolvedores precisam compreender três etapas fundamentais. Vamos explorar cada uma delas em detalhes:

Definindo a Função do Manipulador:

Em um componente React, os manipuladores de eventos são simplesmente funções que definem como o componente deve responder a eventos específicos. Para seguir uma convenção de nomenclatura padrão, é comum prefixar as funções de manipulador de eventos com "handle", seguido pelo nome do evento. Por exemplo, se você deseja tratar um evento de clique, a função pode ser chamada handleClick, e para tratar mudanças em campos de entrada, a função pode ser chamada handleInputChange.

Vinculando Eventos:

Para usar um manipulador de eventos, é necessário vinculá-lo ao elemento correspondente usando o atributo de evento apropriado. No React, os atributos de eventos são nomeados seguindo a convenção camelCase em vez de minúsculas, como é usado no HTML regular. Por exemplo, em vez de usar onchange, você usaria onChange no React para vincular o manipulador de evento de mudança. Esse processo de vinculação conecta a função do manipulador de eventos ao evento específico ao qual deve responder.

Acionando o Evento:

Uma vez que um evento é acionado, o React invoca a função do manipulador de eventos correspondente. Dentro do manipulador de eventos, você tem acesso ao objeto de evento, permitindo que você colete dados sobre o evento e execute ações com base nesses dados. Por exemplo, em um evento onChange para um campo de entrada, você pode obter o valor atual do campo e atualizar o estado do componente de acordo. Da mesma forma, em um evento onClick, você pode alternar um estado ou acionar outras ações relevantes.

Exemplo de tratamento de evento de clique no React:

import { useState } from 'react';
const EventHandleExample = () => {  
    const [count, setCount] = useState(0);

    // Definindo a Função do Manipulador:
    const handleClick = () => {
        setCount(count => count + 1);
    };

    return (
        <div>           
            // Vinculando e Acionando o Evento:
            <button onClick={handleClick}>Clique em Mim</button>
            <p>Clicado {count} vezes.</p> 
        </div>
    );
};

Neste exemplo, quando o botão "Clique em Mim" é clicado, a função handleClick é executada, atualizando o estado count e re-renderizando o componente para exibir a contagem atualizada.

Tipos de Eventos Tratados pelo React

Além das etapas fundamentais do tratamento de eventos, o React oferece vários manipuladores de eventos para lidar com diferentes tipos de interações do usuário. Vamos explorar alguns dos tipos comuns de eventos que podem ser tratados pelo React:

Eventos de Clique:

O evento onClick é um dos manipuladores de eventos mais frequentemente usados no React. Ele permite que você responda aos cliques do usuário em elementos como botões, links ou imagens.

Eventos de Mudança:

O evento onChange é usado para tratar mudanças em elementos de formulário, como campos de entrada, caixas de seleção e botões de rádio. Ele permite que você capture a entrada do usuário e responda às mudanças em tempo real.

Eventos de Passe do Mouse:

O React suporta eventos onMouseOver e onMouseOut para lidar com interações de passagem do mouse. Esses eventos são frequentemente usados para exibir dicas, mostrar informações adicionais ou acionar animações.

Eventos de Teclado:

O React fornece manipuladores de eventos como onKeyDown, onKeyPress e onKeyUp para lidar com interações de teclado. Esses eventos são essenciais para capturar a entrada do teclado do usuário e implementar atalhos de teclado.

Eventos de Envio de Formulário:

O React suporta o evento onSubmit para tratar o envio de formulários. Ele permite que você controle o envio do formulário e faça validações antes de enviar os dados para o servidor.

Eventos de Toque:

O React também oferece manipuladores de eventos de toque, como onTouchStart, onTouchMove, onTouchEnd e outros, permitindo que os desenvolvedores criem aplicativos da web compatíveis com dispositivos móveis.

Eventos de Foco:

O React fornece manipuladores de eventos como onFocus e onBlur para lidar com interações de foco. Esses eventos são acionados quando um elemento ganha ou perde o foco, permitindo que os desenvolvedores controlem o comportamento de foco do usuário.

Eventos de Rolagem:

O React suporta o evento onScroll, que é acionado quando um elemento é rolado. Esse evento permite que os desenvolvedores criem animações com base na rolagem e implementem um comportamento de rolagem personalizado.

Eventos de Arrastar e Soltar:

O React oferece um conjunto de manipuladores de eventos para lidar com interações de arrastar e soltar. Isso inclui onDragStart, onDrag, onDragEnter, onDragLeave, onDragOver e onDrop. Esses eventos permitem que os desenvolvedores criem funcionalidades de arrastar e soltar em suas aplicações.

Conclusão

Os manipuladores de eventos incorporados do React permitem que os desenvolvedores criem aplicativos React altamente interativos e responsivos. Compreender a variedade de tipos de eventos e seus manipuladores correspondentes capacita os desenvolvedores a construir facilmente uma ampla gama de interações do usuário em seus projetos. Ao dominar o tratamento de eventos no React, os desenvolvedores podem elevar a experiência geral do usuário e criar aplicações web envolventes.

Evitando o Prop Drilling no React - Um Guia Prático

Gustavo Priebe — Sun, 28 May 2023 23:08:37 +0000

No ecossistema React, é comum dividir uma aplicação em diversos componentes para torná-la mais modular e reutilizável. À medida que a hierarquia de componentes cresce, surge o desafio de passar dados e estados entre componentes que não estão diretamente aninhados, conhecido como "prop drilling". Isso pode levar a problemas de desempenho, complexidade no código e dificuldade na manutenção.

Neste artigo, discutiremos três formas eficientes de evitar o prop drilling no React: o uso do useContext, a composição de componentes e a biblioteca Zustand para gerenciamento de estado avançado.

Para demonstrar, utilizaremos como exemplo, um usuário que entra no sistema pela página de login e suas informações são armazenadas no estado login. Esse dados precisam ser consumidos apenas pelo componente de perfil que se encontra dentro da página de painel.

Uso de Props no React

// LoginPage.jsx 
import { useState } from "react";
import PainelPage from './PainelPage'

export default function LoginPage() {
    const [login, setLogin] = useState({username: 'admin123', password: '12345'});  
    
    // ...

    return (
        <>
            <PainelPage login={login} />
        </>
    );
}

// PainelPage.jsx
import ProfilePage from './ProfilePage'

export default function PainelPage(props) {
    
    // ...

    return (
        <>
            <ProfilePage login={props.login} />
        </>
    );
}

// ProfilePage.jsx
export default function ProfilePage(props) {
    return (
        <div classname='profile'>
            <p> Welcome {props.login.username} </p>
        </div>
    )
}

No código fornecido como exemplo, podemos observar o uso de props para transmitir as informações de login de um componente para outro. No entanto, quando um componente precisa acessar o estado não sendo um pai direto, ocorre o prop drilling, em que os dados são passados por vários componentes intermediários que não os utilizam diretamente. Isso resulta em um aumento desnecessário da quantidade de renderizações a cada atualização de estado e diminui a reusabilidade dos componentes.

Uso de useContext

O useContext é uma forma nativa do React de compartilhar dados entre componentes sem a necessidade de passar props manualmente em cada nível da hierarquia. É especialmente útil quando é necessário transmitir dados comuns a vários componentes que não mudam com frequência.

Para utilizar o useContext, primeiro, criamos um contexto que armazena o estado de login e permite acesso a esse estado em qualquer parte da aplicação. Podemos fazer isso da seguinte maneira:

// LoginContext.jsx
import { createContext, useState } from 'react';

export const LoginContext = createContext();

export const LoginProvider = ({ children }) => {
  const [login, setLogin] = useState();

  return (
    <LoginContext.Provider value={{ login, setLogin }}>
      {children}
    </LoginContext.Provider>
  );
};

No código acima, criamos um contexto chamado LoginContext usando a função createContext() do React. Em seguida, definimos um provedor (LoginProvider) que envolve os componentes filhos (children). O provedor fornece o valor do contexto, que inclui o estado de login e a função setLogin para atualizá-lo.

Para utilizar esse contexto na aplicação, precisamos envolver o componente raiz com o LoginProvider:

import React from 'react';
import { LoginProvider } from './LoginContext';

const App = () => {

...

  return (
    <LoginProvider>
      {/* Resto da sua aplicação */}
    </LoginProvider>
  );
};

export default App;

Agora, o contexto de login estará disponível em qualquer componente que esteja dentro do LoginProvider. Podemos acessar o contexto usando o hook useContext nos componentes que precisam do estado de login:

// LoginPage.jsx
import { useState, useContext } from 'react';
import { LoginContext } from './LoginContext';

export default function LoginPage() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const { setLogin } = useContext(LoginContext);

  // ...

  return (
    <>
      <div>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            setLogin({ username, password });
          }}
        >
          <input
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
          <input
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <button>Login</button>
        </form>
      </div>
    </>
  );
}

No exemplo acima, utilizamos o useContext para obter a função setLogin do contexto de login. Quando o formulário de login é enviado, chamamos a função setLogin com as informações de username e password.

Para acessar o estado de login em outro componente, como o ProfilePage, podemos fazer o seguinte:

// ProfilePage.jsx
import { useContext } from 'react';
import { LoginContext } from './LoginContext';

export default function ProfilePage() {
  const { login } = useContext(LoginContext);

  // ...

  return (
    <div className="profile">
      <p>Welcome {login.username}</p>
    </div>
  );
}

Dessa forma, o componente ProfilePage tem acesso ao estado de login diretamente através do contexto, evitando o prop drilling.

Composição de Componentes

A composição de componentes é outra abordagem para evitar o prop drilling. Em vez de passar props diretamente de um componente para outro, os componentes são aninhados hierarquicamente para formar uma composição lógica.

Podemos utilizar a composição de componentes da seguinte maneira:

// LoginPage.jsx
import { useState } from 'react';
import PainelPage from './PainelPage';
import ProfilePage from './ProfilePage';

export default function LoginPage() {
  const [login, setLogin] = useState({ username: 'admin123', password: '12345' });

  // ...

  return (
    <PainelPage>
        <ProfilePage login={login} />
    </PainelPage>
  );
}

No exemplo acima, no componente LoginPage, o componente ProfilePage é aninhado dentro do componente PainelPage como um componente filho. Assim, o componente ProfilePage recebe as propriedades de login diretamente como prop.

// PainelPage.jsx
export default function PainelPage({ children }) {
  return (
    <div> 
        {children} 
    </div>
  );
}

No componente PainelPage, utilizamos a prop especial children para renderizar o conteúdo que é passado como componente filho. Dessa forma, o componente ProfilePage é renderizado dentro do PainelPage.

// ProfilePage.jsx
export default function ProfilePage({ login }) {
  // ...

  return (
    <div className="profile">
      <p>Welcome {login.username}</p>
    </div>
  );
}

No componente ProfilePage, recebemos as propriedades de login diretamente como login e as utilizamos normalmente para exibir as informações desejadas.

Dessa forma, as propriedades de login são passadas diretamente do componente LoginPage para o ProfilePage por meio da composição de componentes.

Zustand

Além das abordagens mencionadas anteriormente, outra opção para evitar o prop drilling no React é o uso da biblioteca Zustand. O Zustand é um gerenciador de estado leve que oferece uma maneira simples de compartilhar e atualizar estados entre componentes.

Com o ele, você pode criar um store global que armazena o estado e fornecer acesso a esse estado para os componentes que precisam dele. Os componentes podem se inscrever para receber atualizações automáticas sempre que o estado for alterado, eliminando a necessidade de passar props manualmente.

// store.js
import create from 'zustand';

const useStore = create((set) => ({
  login: {},
  setLogin: (newLogin) => set(() => ({ login: newLogin })),
}));

export default useStore;

No exemplo acima, criamos um store utilizando a função create do Zustand. O store possui uma propriedade login que é o estado inicial e uma função setLogin que permite atualizar o estado.

Para utilizar o estado de login em um componente, podemos fazer o seguinte:

// LoginPage.jsx
import { useState } from 'react';
import useStore from './store';

export default function LoginPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const setLogin = useStore((state) => state.setLogin);

  // ...

  return (
    <>
      <div>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            setLogin({ username, password });
          }}
        >
          <input
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
          <input
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <button>Login</button>
        </form>
      </div>
    </>
  );
}

Utilizamos o hook useStore para obter a função setLogin do store do Zustand. Quando o formulário de login é enviado, chamamos a função setLogin com as informações de username e password.

Dentro do ProfilePage, podemos acessar o estado de login atualizado da seguinte forma:

// ProfilePage.jsx
import useStore from './store';

export default function ProfilePage() {
  const login = useStore((state) => state.login);

  // ...

  return (
    <div className="profile">
      <p>Welcome {login.username}</p>
    </div>
  );
}

Dessa forma, o componente ProfilePage utiliza o hook useStore para acessar o estado de login atualizado automaticamente pelo Zustand, evitando o prop drilling.

Conclusão

O prop drilling pode ser um desafio em aplicações React, mas existem diversas abordagens para evitá-lo. Neste artigo, exploramos três formas de evitar o prop drilling: o uso do useContext, a composição de componentes e a biblioteca Zustand.

Utilizando o useContext, é possível criar um contexto para compartilhar dados entre componentes sem precisar passar props manualmente em cada nível da hierarquia. A composição de componentes permite organizar a estrutura lógica dos componentes de forma hierárquica, evitando a necessidade de passar props desnecessárias. O Zustand é uma biblioteca leve que oferece uma maneira simples de compartilhar e atualizar estados entre componentes.

Cada abordagem tem suas vantagens e é importante considerar a natureza específica do projeto ao escolher a mais adequada. Com a aplicação dessas técnicas, é possível melhorar o desempenho, a reusabilidade e a manutenção do código React.