useEffect: olvida el ciclo de vida, ahora piensa en efectos

Curso Profesional de React Hooks

¡Bienvenida! Este es un curso especial de React Hooks

¿Qué aprenderás en el Curso Profesional de React Hooks?

¿Qué son los React Hooks y cómo cambian el desarrollo con React?

Introducción a React Hooks

useState: estado en componentes creados como funciones

useEffect: olvida el ciclo de vida, ahora piensa en efectos

useContext: la fusión de React Hooks y React Context

useReducer: como useState, pero más escalable

¿Qué es memoization? Programación funcional en JavaScript

useMemo: evita cálculos innecesarios en componentes

useRef: manejo profesional de inputs y formularios

useCallback: evita cálculos innecesarios en funciones

Optimización de componentes en React con React.memo

Custom hooks: abstracción en la lógica de tus componentes

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

Proyecto: análisis y retos de Platzi Conf Store

Git Hooks con Husky

Instalación de Webpack y Babel: presets, plugins y loaders

Configuración de Webpack 5 y webpack-dev-server

Configuración de Webpack 5 con loaders y estilos

Loaders de Webpack para Preprocesadores CSS

Flujo de desarrollo seguro y consistente con ESLint y Prettier

Estructura y creación de componentes para Platzi Conf Store

Arquitectura de vistas y componentes con React Router DOM

Maquetación y estilos del home

Maquetación y estilos de la lista de productos

Maquetación y estilos del formulario de checkout

Maquetación y estilos de la información del usuario

Maquetación y estilos del flujo de pago

Integración de íconos y conexión con React Router

Integración de React Hooks en Platzi Conf Merch

Creando nuestro primer custom hook

Implementando useContext en Platzi Conf Merch

useContext en la página de checkout

useRef en la página de checkout

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

Paso a paso para conectar tu aplicación con la API de PayPal

Integración de pagos con la API de PayPal

Completando la integración de pagos con la API de PayPal

Paso a paso para conectar tu aplicación con la API de Google Maps

Integración de Google Maps en el mapa de checkout

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

Continuous integration y continuous delivery con GitHub Actions

Compra del dominio y despliega con Cloudflare

Optimización de aplicaciones web con React

Integración de React Helmet para mejorar el SEO con meta etiquetas

Análisis de performance con Google Lighthouse

Convierte tu aplicación de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

Crea una API con Strapi CMS y consúmela con React.js

¿Qué sigue en tu carrera profesional?

Próximos pasos para especializarte en frontend

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Recursos

Aportes 152

Preguntas 14

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Fabián Sandobal

hace 4 años

Cada día tengo mayor fluidez con React 😍

Sneyder Alfonso Barreto Buitrago

hace 4 años

¡Hola!
Aquí comparto mi solución al reto:

Diego Artiles

hace 4 años

Escribí un artículo en mi blog que quizás les ayude a complementar los conocimientos que Oscar transmitió en esta clase ❤❤
.
Link del articulo: https://dartiles.dev/blog/useeffect-react-hooks-ciclos-de-vida
.

.
Este blog es un claro reflejo de los conocimientos que adquirí en el curso practico de sapper y svelte de Oscar

Jorge Eliecer Rangel Jimenez

hace 4 años

Comparto el useEffect usando asyn/await

import React, { useState, useEffect } from "react";

const Characters = () => {
  const [characters, setCharacters] = useState([]);

  const getCharacters = async () => {
    const response = await fetch("https://rickandmortyapi.com/api/character");
    const data = await response.json();
    setCharacters(data.results);
  };

  useEffect(() => {
    getCharacters();
  }, []);

  return (
    <div className="Characters">
      {characters.map((character) => (
        <h2 key={character.id}>{character.name}</h2>
      ))}
    </div>
  );
};

export default Characters;

Christian Juan Tambo Coaquira

hace 4 años

useEffect: olvida el ciclo de vida, ahora piensa en efectos

useEffect nos permite manejar efectos que van a ser transmitidos dentro del componente.
En este ejemplo se llama a una API, traemos la información y la ejecutaremos en el componente

Creamos el componente Characters.jsx
Usamos el API de RickandMorty

⠀
Characters.jsx

// importar useState y useEffect
import React, {useState, useEffect} from 'react'


const Characters = () => {
    /**
     * Lógica de useState
     * constante donde internamente estructuramos los elementos que necesitamos
     * de useState y lo iniciamos como un vector vacío
     */
    const [characters, setCharacters] = useState([]);
    
    /**
     * Lógica de useEffect
     * es una función con 2 parámetros
     * el primero es una función anónima donde va a estar la lógica
     * el segundo es una variable que esta escuchando si hay cambios 
     */
    useEffect(() => {
        // useEffect llama a fetch, el cual obtiene la informacion de la api de RickAndMorty
        fetch('https://rickandmortyapi.com/api/character/')
        .then(response => response.json())
        .then(data => setCharacters(data.results));
    }, [])
    
    /** 
     * Nombre del personaje
     * Iteramos por cada uno de los elementos
     */
    return (
        <div className="Characters">
            {characters.map(character => (
                <h2>{character.name}</h2>
            ))}
        </div>
    )
}

export default Characters

⠀
App.js

import React from 'react'
// Importamos componente Header
import Header from './components/Header';
// Importamos componente Characters
import Characters from './components/Characters';
import './App.css';

function App() {
  return (
    <div className="App">
      <Header />
      <Characters />
      <h1>
        Hola Mundo
      </h1>
    </div>
  );
}

export default App;

Pablo Racana

hace 4 años

Como el darkmode es una variable global, subí la logica al nivel de App.js y desde header solo retorno la función que hace el cambio de color.

Usando bootstrap con sus clases para definir colores de texto y fondo, rapidamente puedes hacer este efecto de darkmode y responsive.

import "./App.css";
import React, { useState } from "react";

import { Header } from "./components/Header";
import Characters from "./components/Characters";

function App() {
  const [darkMode, setDarkMode] = useState(false);
  let bg = darkMode ? "bg-dark text-light" : "bg-light text-dark"
  return (
    <>
        <div className= {"App "+ bg}>
          <Header
            darkMode={darkMode}
            onClick={() => setDarkMode(!darkMode)}
          ></Header>
          <Characters></Characters>
        </div>
      
    </>
  );
}

export default App;

import React from 'react'

export const Header =( props )=>{
    
    return(
        <div className="Header ">
            <h1>React Hooks</h1>
            <button type="button" onClick={()=>props.onClick()}>
                {props.darkMode ? "Light Mode" : "Dark Mode"}
            </button>
        </div>

    )
}

import React, { useEffect, useState } from "react";

const Characters = () => {
  const [characters, setCharacters] = useState([]);

  useEffect(() => {
    fetch("https://rickandmortyapi.com/api/character/")
      .then((r) => r.json())
      .then((data) => setCharacters(data.results));
  }, []);

  return (
    <div className="container">
            
        <div className="row">
      {characters.map((character) => (
        <div className="col">
          <>
          <img className="character__img" src={character.image} alt="" />
          <h2 className="character__name">{character.name}</h2>
          </>
          </div>
          ))}
    </div>
    </div>
  );
};

export default Characters;

Omar Jesus Hernández Bastos

hace 4 años

Usando tailwindcss

import React, { useState, useEffect } from 'react';

const Characters = () => {
  const [characters, setCharacters] = useState([]);
  const API = 'https://rickandmortyapi.com/api/character/';
  useEffect(() => {
    fetch(API)
      .then(response => response.json())
      .then(data => setCharacters(data.results));
  }, []);

  return (

    <section className="text-gray-700 body-font ">

      <div className="flex flex-col text-center w-full mb-20">
        <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Rick and Morty</h1>
        <p className="lg:w-2/3 mx-auto leading-relaxed text-base">All Characters</p>
      </div>
      <div className="container px-5 mx-auto ">
        <div className=" flex flex-wrap -m-2">
          {characters.length > 0 && characters.map(character => (
            <div className="p-2 lg:w-1/3 md:w-1/2 w-full">
              <div className="h-full flex items-center border-gray-200 border p-4 rounded-lg">
                <img alt="team" className="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src={character.image} />

                <div className="flex-grow">
                  <h2 className="text-gray-900 title-font font-medium">{character.name}</h2>
                  <p className="text-gray-500">{character.status}</p>
                  <p className="text-gray-500">{character.species}</p>

                </div>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
};

export default Characters;

Andrés Argote

hace 4 años

useEffect

Nos ayuda con todo lo que tiene que ver con efectos secundarios. Algunos ejemplos de efectos secundarios son:

-Peticiones de datos

-Establecimiento de suscriptores

-Actualizaciones manuales del DOM

**Características de useEffect **

-Recibe dos parámetros: el primero una función y el segundo un array cuyos valoren serán variables de las que depende nuestro efecto(este array es opcional).

-Se va a ejecutar en cada renderizado del componente incluyendo el primero.

-Puedes usar más de un useEffect x componente

-Está diseñado para que la función que pases como parámetro retorna a su vez otra función, React va a ejecutar dicha función cuando se desmonte el componente

(BONUS) Como funciona el ciclo de vida de un componente?

OJO el ciclo de vida de un componente es un concepto para trabajar con componente de tipo clases, pero se me hacía interesante entender como funcionaba.

Veremos solo como funciona por encima cada ciclo tiene sus propios componentes para poder manejarlo.

El ciclo de vida de React se puede dividir en 3 fases, que son: Él montando, la actualización y el desmontado

Montado: Esta es la primera fase y ocurre una vez por componente cuando este se crea y se monta en la UI.

Actualización: Esta puede ocurrir ninguna o múltiples veces, esta fase sucede cuando ocurre algún cambio en el componente y por lo tanto requiere que la UI se vuelva a generar para que se puedan percibir estos cambios.

Desmontado: Es la última fase y se puede ejecutar un método antes de que se desmonte el componente de la UI.

¿Cuál es la diferencia entre el useEffect y los metodos del ciclo de vida?

La diferencia esta en que cuando usamos useEffect no pensamos en el cuando(en que fase estamos) si no, en el por qué el efecto se va a ejecutar(cambios en una dependencia).

Para profundizar les comparto lo siguiente blog: https://matiashernandez.dev/react-useeffect-hook-comparado-con-los-estados-del-ciclo-de-vida

https://platzi.com/blog/ciclo-de-vida-de-un-componente-de-reactjs/#:~:text=El ciclo de vida se,o después de cierta acción.