Organizar código con ganchos de reacción y contexto

Cuando se trabaja en proyectos React a gran escala, es crucial tener una base de código bien organizada para una mejor capacidad de mantenimiento y escalabilidad.

En este artículo, nos sumergiremos en las mejores prácticas para organizar su código fuente en React, con un enfoque en la utilización de React Hooks and Context.

 

Uso de React Hooks para la gestión de estado

Los Hooks de React son una colección de funciones que te permiten usar el estado y otras características de React sin usar clases. Esto ayuda a escribir código más conciso y legible. Por ejemplo, podemos usar useState Hook para administrar el estado en un componente.

Aquí hay un ejemplo:

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;  

 

combinación de ingredientes

Uno de los beneficios de React es la capacidad de reutilizar componentes. Para aumentar la organización, podemos usar componentes más pequeños para construir componentes más grandes.

Esto ayuda a desglosar el trabajo y facilita el mantenimiento del código. Por ejemplo, podemos crear un <Button> componente para usar en varios lugares de nuestra aplicación:

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

 

Uso de contexto para administrar el estado global

El contexto es un mecanismo en React que nos permite compartir datos entre componentes secundarios sin pasar por los componentes principales. Esto evita pasar atributos de datos a través de múltiples niveles de componentes y ayuda a reducir la complejidad del código.

Aquí hay un ejemplo del uso de Contexto para compartir el idioma actual en la aplicación:

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;  

 

Arriba hay algunas mejores prácticas para organizar el código fuente de React usando React Hooks and Context.