Buenas prácticas con React

29 de mayo de 2022 — 3 minutos de lectura

Cuando aprendes React de forma autodidacta puedes encontrarte con muchas dudas a la hora de cómo organizar tu código o incluso cómo declarar las funciones. Esto es porque React (o más bien JavaScript) es tan flexible que te permite abordar el mismo problema de muchísimas formas, pero a veces puede que la forma en la que se nos ocurre no sea precisamente la más adecuada.

En este post compartiré cinco consejos que me ayudaron en el proceso de aprendizaje y que nos hace el desarrollo con React mucho más satisfactorio.

Megacomponentes

Muchas veces podemos pecar de crear componentes muy grandes o complejos, por lo que perderemos gran parte de reusabilidad, refactorización y simplicidad a la hora de testing.

Por ello la mejor opción es modularizar lo máximo posible nuestros componentes y simplificarlos de tal manera que podamos aprovechar su estructura para principios SOLID.

Aunque es un caso muy simple podemos ver un ejemplo de refactorización con el siguiente código.

1const NavBar = (props) => {
2  return (
3    <div className="nav">
4      <div className="logo">Logo</div>
5      <ul>
6        <li>
7          <a href="/" className="nav-link">
8            Home
9          </a>
10        </li>
11        <li>
12          <a href="/contact" className="nav-link">
13            Contact Us
14          </a>
15        </li>
16      </ul>
17      <form className="search-form">
18        <input
19          className="search-input"
20          type="search"
21          placeholder="Search"
22          aria-label="Search"
23        />
24        <button className="search-button" type="submit">
25          Search
26        </button>
27      </form>
28    </div>
29  )
30}
31
32export default NavBar

El código representa una barra de navegación la cual podemos separar en tres componentes principales: Logo, Lista y Formulario de Búsqueda

Ahora vamos a refactorizar cada uno de ellos en un componente.

1import Logo from "./Logo";
2import NavList from "./NavList";
3import SearchForm from "./SearchForm";
4
5const NavBar = (props) => {
6  return (
7    <>
8      <Logo />
9      <NavList />
10      <SearchForm />
11    </>
12  )
13}
14
15export default NavBar

Mucho mejor, ¿verdad?

Estructura

No es raro al ir desarrollando con React ir creando componentes esparcidos en el proyecto sin organización ninguna, pero a la larga, a medida que crece tu proyecto, puedes encontrarte en medio de algo bastante caótico.

Una de las prácticas que más se siguen en React para medianos o grandes proyectos es organizar los componentes por carpetas.

Esto nos permite organizar en una misma carpeta un componente, con sus estilos, testing, documentación, etc.

Si nos fijamos en las carpetas de los componentes, por ejemplo del componente NavBar, podemos ver que tiene un archivo index.tsx y un archivo NavBar.tsx.

En el archivo index.tsx podemos alojar todo nuestro componente para importarlo luego desde la ruta ./NavBar, el problema de esto es que en nuestro editor tendremos muchas pestañas index.tsx, lo cual nos va a provocar mucha confusión al buscar entre nuestros componentes.

Una solución a esto es crear un archivo con el nombre del componente, como puede ser NavBar.tsx, para que contenga toda la lógica del mismo.

Luego en index.tsx exportamos este componente para poder importarlo de la misma forma que siempre con la ruta ./NavBar, si no tenemos este archivo index tendríamos que importarlo con la ruta ./NavBar/NavBar, menos elegante para mi gusto.

src/NavBar/NavBar.tsx

1import * as React from "react"
2import { useState } from "react"
3import Logo from "../Logo"
4import NavList from "../NavList"
5import SearchForm from "../SearchForm"
6
7const Button = ({ onClick, count }, {}) => {
8  return <button onClick={onClick}>counter {count}</button>
9}
10
11const NavBar = (props) => {
12  const [count, setCount] = useState(0)
13
14  const handleClick = () => setCount(count + 1)
15
16  return (
17    <>
18      <Logo />
19      <NavList />
20      <SearchForm />
21      <Button onClick={handleClick} count={count} />
22    </>
23  )
24}
25
26export default NavBar

src/NavBar/index.tsx

1export { default } from "./NavBar"

Rendimiento

Sin pretenderlo, podemos encontrarnos con un fallo de optimización bastante común, como puede ser renderizar un componente hijo cada vez que su padre se actualiza a través de una función.

Esto puede provocar problemas de rendimiento y comportamientos impredecibles en nuestras aplicaciones.

Podemos ver la comparación con los siguientes ejemplos.

1import { useState } from "react"
2import Logo from "./Logo"
3import NavList from "./NavList"
4import SearchForm from "./SearchForm"
5
6const NavBar = (props) => {
7  const [count, setCount] = useState(0)
8
9  const handleClick = () => setCount(count + 1)
10
11  const Button = () => {
12    return <button onClick={handleClick}>counter {count}</button>
13  }
14
15  return (
16    <>
17      <Logo />
18      <NavList />
19      <SearchForm />
20      <Button />
21    </>
22  )
23}
24
25export default NavBar

Una forma de solventarlo es apartando este componente hijo y pasar como propiedad la función.

1import { useState } from "react"
2import Logo from "./Logo"
3import NavList from "./NavList"
4import SearchForm from "./SearchForm"
5
6const Button = ({ onClick, count }) => {
7  return <button onClick={onClick}>counter {count}</button>
8}
9
10const NavBar = (props) => {
11  const [count, setCount] = useState(0)
12
13  const handleClick = () => setCount(count + 1)
14
15  return (
16    <>
17      <Logo />
18      <NavList />
19      <SearchForm />
20      <Button onClick={handleClick} count={count} />
21    </>
22  )
23}
24
25export default NavBar

¡Listo! Con este truco tendremos aplicaciones mucho más eficientes.

Demasiados divs

Seguramente te hayas topado con este error desarrollando en React:

Y es que para renderizar un componente, este debe de estar contenido en un sólo padre.

De forma intuitiva plantamos un <div>...</div> y listo, pero con esto tendríamos en nuestro proyecto muchos divs innecesarios, lo que puede provocar problemas de accesibilidad y en estilos CSS.

Para solucionar esto podemos hacer uso del componente <React.Fragment>...</React.Fragment> o <>...</>.

1return (
2    <>
3      <Logo />
4      <NavList />
5      <SearchForm />
6      <Button onClick={handleClick} count={count} />
7    </>
8  )

Spread Props

Otro truco de React es la propagación de propiedades o spread props, que sería la alternativa a tener que escribir todas las propiedades de un componente uno a uno (que cuando son muchas hace daño a la vista).

Esto sólo puede hacerse cuando el objeto que estamos pasando como parámetro tiene las mismas propiedades que el componente.

Como siempre, usaremos ejemplos muy simples con sólamente dos propiedades, pero podemos usar la imaginación y extrapolarlo a un componente con cincuenta.

Supongamos que en nuestro Logo queremos parametrizar un título y un eslogan. En este ejemplo podríamos ver una asignación de propiedades tradicional.

1const LogoData = {
2    title: "Title",
3    slogan: "slogan"
4  }
5
6  return (
7    <>
8      <Logo title={LogoData.title} slogan={LogoData.slogan}/>
9      <NavList />
10      <SearchForm />
11      <Button onClick={handleClick} count={count} />
12    </>
13  )

Ahora veremos la alternativa con spread props.

1const LogoData = {
2    title: "Title",
3    slogan: "slogan"
4  }
5
6  return (
7    <>
8      <Logo {...LogoData}/>
9      <NavList />
10      <SearchForm />
11      <Button onClick={handleClick} count={count} />
12    </>
13  )

Imaginaros lo que nos ahorra esto para componentes con muchas propiedades.

Lo que sí es recomendable no abusar de esta técnica, ya que al no tener las propiedades epxlícitamente, podemos encontrarnos con problemas a la hora de revisar nuestro código. Por ello, mejor usarla sólo cuando la cantidad de propiedades justifique su uso.

Fin

Con esto terminamos los cinco consejos que a toda persona que comienza con React le vendrá de perlas.

Existen muchas utilidades y soluciones además de las mencionadas, pero algunas requieren un conocimiento más avanzado y explicaciones más densas. Probablemente escribiré en un futuro sobre ellas.

🖖🏽

Foto de portada de Simone Hutsch en Unsplash