Optimización de Composición de Componentes en React

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:03

Optimización de Composición de Componentes en React

Curso de React.js: Patrones de Render y Composición

Clase 5 de 19

Clase 5 / 19

Recursos

Las maravillas de una buena composición en React y el poder simplificar el uso de Context

La programación en React nos ofrece herramientas poderosas para crear aplicaciones interactivas y dinámicas. Es vital comprender la importancia de una composición adecuada de los componentes para lograr una comunicación eficiente entre ellos, es decir, entre componentes principales, hijos, nietos y otros niveles inferiores. En este artículo, exploraremos cómo podemos mejorar la composición en una aplicación de React para lograr un código más limpio y saludable, optimizando el uso de React Context junto con Hooks personalizados para un manejo de estados más eficiente.

¿Cómo iniciar la mejora de nuestros componentes?

Al revisar la aplicación actual y su código, es crucial el no temer eliminar las partes del código que ya no son necesarias. Limpiar y mantener actualizado nuestro componente App no solo pulirá nuestro proyecto, sino que también nos ayudará a identificar partes del código que se pueden mejorar o incluso, en algunos casos, ser eliminadas por completo.

¿Por qué es importante borrar el código innecesario?

Borrar el código de lecciones o prácticas anteriores cuando ya no es necesario es un paso esencial en el desarrollo de software. Esto no solo ayuda a mantener el código limpio y legible, sino también facilita la detección de áreas que pueden requerir una mejor composición. El código más limpio lleva a una menor carga cognitiva para los desarrolladores, permitiendo que se centren en funciones y composiciones más relevantes.

¿Cómo beneficia React Context a nuestra aplicación?

React Context es una herramienta poderosa para evitar el prop drilling, es decir, el paso innecesario de props a través de varios niveles de componentes. Con un Context, podemos proporcionar un estado global accesible para varios componentes, haciendo la gestión del estado más sencilla y eficiente. En nuestra aplicación, usamos un custom hook useLocalStorage que interactúa con React Context para administrar el estado local de manera efectiva.

¿Qué problemáticas se resuelven con un uso adecuado de React Context?

A través de un Provider, toda la lógica para gestionar estados y manejar actualizaciones como buscar o completar componentes se centraliza. Esto facilita que cualquier componente envuelto en nuestro Provider pueda acceder a la información necesaria del contexto sin tener que gestionar múltiples pasos de estado a través de la jerarquía de componentes.

¿Cómo podemos mejorar la composición usando React Context?

Una situación común en aplicaciones de React es tener varios componentes que accedan directamente al contexto para obtener la información que necesitan. Mejorar la composición implica entregar esa información a través de un único punto, es decir, pasar las props directamente desde el componente que maneja el estado a los componentes hijos que lo necesitan, en lugar de hacer llamados individuales a useContext dentro de cada uno de ellos.

¿Es siempre necesario usar React Context?

Aunque React Context es una herramienta útil para manejar estados globales, no siempre es la solución más adecuada. Una buena composición y la correcta ubicación del estado pueden hacer que sea innecesario utilizar Context. Se puede alcanzar una mayor eficiencia y simplicidad en la aplicación estructurando mejor los componentes y sus relaciones, lo cual optimiza la comunicación entre ellos sin recurrir al uso excesivo de Context.

La optimización de la composición de componentes en React es más que una mejora estética; es una cuestión de eficiencia y mantenibilidad del código. Tomarse el tiempo para revisar y reestructurar el código puede llevar a una aplicación más robusta, fácil de entender y, en última instancia, más sencilla de mantener y evolucionar. El aprendizaje continuado y la reevaluación de las prácticas de codificación son claves para todo desarrollador que busque mejorar sus habilidades en React. ¡Sigue aprendiendo y mejorando tu aplicación con cada línea de código que escribas!

Miguel Aguilar

Hace 4 años

Analizando la composición de Todo Machine

Vamos a analizar la composición de los componentes que tenemos en nuestra aplicación para saber donde podemos mejorarla. | La información de la aplicación la estamos almacenando y compartiendo a través de un provider, este componente provider (TodoProvider) llama a nuestro customHook ‘useLocalStorage’.

const TodoContext = createContext();

function TodoProvider(props){

    const {item :todos,
        saveItem,
       	loading,
        error
       } = (useLocalStorage('TODOS_V1', []));

UselocalStorage se encarga de proporcionarnos los estados de carga, error y el estado de la app el cual almacena en el localstorage del navegador. | Entonces, en el componente TodoContext, estamos usando un provider y este provider utiliza el customHook useLocalStorage y ademas tambien posee los metodos o funcionalidades de nuestra app. Todas estas funciones y variables se las estamos proporcionando a nuestro provider en su atributo value

...

return(
        <TodoContext.Provider value={{
            error,
            loading,
            totalTodos,
            completedTodos,
            searchValue,
            setSearchValue,
            toggleCompleteTodo,
            deleteTodo,
            searchedTodos,
            openModal,
            setOpenModal,
            addTodo,
        }}>
            {props.children}
        </TodoContext.Provider>
    )

Luego al envolver nuestra app en este provider, podemos acceder a cualquiera de estas funcionalidades o valores desde cualquier componente de nuestra app.

function App() {
  return (
     <TodoProvider>
       <AppUI/>
     </TodoProvider>
  );
}

En nuestro componente ‘AppUI’ estamos recibiendo parte de estos valores del provider a través del hook useContext.


const AppUI = () => {
 
    const {
           error,
           loading,
           searchedTodos,
           toggleCompleteTodo,
           deleteTodo,
           setOpenModal,
           openModal,
           searchValue
          } = useContext(TodoContext);
...

Pero tenemos dos componentes que no estan aprovechando esto, es decir tenemos dos componentes que internamente están haciendo sus propios llamados mediante useContext para obtener los valores del provider, lo cual es innecesario debido a que podemos pasarles esos valores que necesitan directamente desde el componente ‘AppUI’, estos componentes son ‘TodoCounter’ y ‘TodoSerach’

  <TodoCounter/>
      <TodoSearch/>

Comentarios (27)27 comentarios

Lucas Frezzini

Hace 5 años

Juan Castro

Profesor

Edwin Arley Upegui Vergara

Josue Alonso

Richard Fernando Jiménez

Omar Gabriel Aguilar Moscoso

Beto Martinez

Edmir Galván Vázquez

Vicente Benavides

Kevin Fiorentino

Luis Alejandro Nieto Ruth

Luis Alejandro Vera Hernandez

Oscar Adrián Martínez Cavazos

Hace 3 años

Xavier Flores

Aldo Sebastián Méndez Gonzalez

Eduardo Lemus Zavala

Carlos López

Ramiro Godoy

Manuel G. Pineda

Moises Jesus Duarte

Felipe Quiceno Gomez

Roberto Enrique Ajuchan Lopez

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Optimización de Composición de Componentes en React

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos