Organizando o código com React Hooks e contexto

Ao trabalhar em projetos React de grande escala, é crucial ter uma base de código bem organizada para melhor capacidade de manutenção e escalabilidade.

Neste artigo, vamos mergulhar nas melhores práticas para organizar seu código-fonte no React, com foco na utilização de React Hooks e Context.

 

Usando React Hooks para gerenciamento de estado

Os React Hooks são uma coleção de funções que permitem que você use o estado e outros recursos do React sem usar classes. Isso ajuda a escrever um código mais conciso e legível. Por exemplo, podemos usar o gancho useState para gerenciar o estado em um componente.

Aqui está um exemplo:

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  const increment =() => {  
    setCount(count + 1);  
  };  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>Increment</button>  
    </div>  
 );  
}  
  
export default Counter;  

 

combinação de ingredientes

Um dos benefícios do React é a capacidade de reutilizar componentes. Para aumentar a organização, podemos usar componentes menores para construir componentes maiores.

Isso ajuda a dividir o trabalho e tornar o código fácil de manter. Por exemplo, podemos criar um <Button> componente para usar em vários locais da nossa aplicação:

import React from 'react';  
  
function Button({ onClick, children }) {  
  return <button onClick={onClick}>{children}</button>;  
}  
  
export default Button;  

 

Usando o contexto para gerenciar o estado global

Contexto é um mecanismo no React que nos permite compartilhar dados entre componentes filhos sem passar pelos componentes pais. Isso evita a passagem de atributos de dados entre vários níveis de componentes e ajuda a reduzir a complexidade do código.

Aqui está um exemplo de uso do Context para compartilhar o idioma atual no aplicativo:

import React, { createContext, useContext, useState } from 'react';  
  
const LanguageContext = createContext();  
  
function App() {  
  const [language, setLanguage] = useState('en');  
  
  const changeLanguage =(newLanguage) => {  
    setLanguage(newLanguage);  
  };  
  
  return( 
    <LanguageContext.Provider value={{ language, changeLanguage }}>  
      <div>  
        <Navbar />  
        <Content />  
      </div>  
    </LanguageContext.Provider>  
 );  
}  
  
function Navbar() {  
  const { language, changeLanguage } = useContext(LanguageContext);  
  
  return( 
    <div>  
      <button onClick={() => changeLanguage('en')}>English</button>  
      <button onClick={() => changeLanguage('fr')}>French</button>  
      <button onClick={() => changeLanguage('es')}>Spanish</button>  
      <p>Current language: {language}</p>  
    </div>  
 );  
}  
  
function Content() {  
  const { language } = useContext(LanguageContext);  
  
  return <p>This is the content in {language}.</p>;  
}  
  
export default App;  

 

Acima estão algumas práticas recomendadas para organizar o código-fonte do React usando React Hooks and Context.