Cómo Crear Componentes React Flexibles: 5 Consejos Esenciales con Ejemplos

Autor: rioyi | Lectura: 3 minutos | May 28, 2024

Si tienes tu propia biblioteca de componentes React, sabes que los componentes cambian y crecen. Como los requisitos pueden cambiar, tus componentes deben ser flexibles para adaptarse.

Cómo Crear Componentes React Flexibles: 5 Consejos Esenciales con Ejemplos

Aquí te comparto cinco mejores prácticas que seguimos en Skai para desarrollar componentes React, con ejemplos para que sea más claro.

1. Usa la API Nativa

Imagina que estás creando un menú desplegable. Este menú recibe una lista de opciones y una prop selectedValue. Además, agregamos una prop onSelectValue.

const Dropdown = ({ options, selectedValue, onSelectValue }) => {
  // Componente de menú desplegable
};

Aunque esto funcionaría, hay dos problemas con usar props personalizadas en lugar de las estándar:

1. Los estándares ayudan a todos: Otros desarrolladores no conocen tus nombres personalizados y dependerán de tu documentación. Usar la API HTML estándar y los eventos de React asegura que tu componente se comporte de manera predecible sin necesidad de revisar la documentación.
2. Los estándares son útiles: Otros componentes también se beneficiarán de usar las APIs estándar. Por ejemplo, nuestro menú desplegable funcionaría mejor con bibliotecas como react-hooks-form sin necesidad de configuraciones especiales.

En lugar de props específicas, usa nombres estándar como value y onChange.

const Dropdown = ({ options, value, onChange }) => {
  // Componente de menú desplegable usando props estándar
};

2. Exponer las Props className y style

Haz que tu componente sea fácil de personalizar exponiendo las props className y style.

const Button = ({ className, style, ...props }) => {
  return <button className={className} style={style} {...props} />;
};

Diferentes proyectos usan distintos métodos de estilo: CSS regular, Styled Components o TailwindCSS. Al exponer estas props, cualquier desarrollador puede aplicar sus estilos fácilmente.

3. Prefiere Composición sobre Configuración

A veces veo props como searchable, withIcons, multiSelection, etc. Aunque estas props pueden simplificar el uso del componente al principio, demasiadas opciones pueden complicar su mantenimiento y uso.

const Dropdown = ({ options, children }) => {
  // Componente básico de menú desplegable
  return (
    <div>
      {options.map(option => (
        <div key={option.value}>{option.label}</div>
      ))}
      {children}
    </div>
  );
};

// Uso del componente con composición
const SearchableDropdown = () => {
  return (
    <Dropdown options={options}>
      <input type="text" placeholder="Search..." />
    </Dropdown>
  );
};

Es mejor permitir que los usuarios compongan características en lugar de configurarlas todas en un solo componente. Esto hace que el componente sea más flexible y fácil de mantener.

4. Proveer Bloques de Construcción

Para facilitar el uso, proporciona bloques de construcción pre-hechos.

const DropdownOption = ({ label, value, onClick }) => (
  <div onClick={() => onClick(value)}>{label}</div>
);

const Dropdown = ({ options, onSelect }) => (
  <div>
    {options.map(option => (
      <DropdownOption key={option.value} {...option} onClick={onSelect} />
    ))}
  </div>
);

Esto permite a la mayoría de los usuarios usar el componente de manera sencilla, mientras que aquellos que necesiten más personalización pueden hacerlo sin problemas.

5. Extender un Proyecto Existente

Antes de crear un nuevo componente, busca soluciones existentes.

import Toggle from 'react-toggle';

const MyToggle = () => (
  <Toggle
    defaultChecked={false}
    icons={false}
    onChange={e => console.log(e.target.checked)}
  />
);

Las buenas soluciones se basan en el conocimiento y esfuerzo de muchas personas. Usar una solución bien mantenida puede ahorrarte tiempo y asegurar que estás usando algo probado y mejorado por otros desarrolladores.

En resumen, a menos que tengas mucho tiempo para dedicar a un componente, es probable que una solución existente sea mejor que crear una desde cero.

Foto de Oskar Yildiz en Unsplash

¿Disfrutas mi contenido?

¡Considera invitarme un café para apoyarme a manter los servidores!

Javascript Reactjs