{"id":2998,"date":"2021-10-21T16:36:30","date_gmt":"2021-10-21T21:36:30","guid":{"rendered":"https:\/\/www.pensemosweb.com\/?p=2998"},"modified":"2024-04-02T17:33:05","modified_gmt":"2024-04-02T23:33:05","slug":"react-hooks-usestate-y-useeffect","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/react-hooks-usestate-y-useeffect\/","title":{"rendered":"React Hooks, useState and useEffect"},"content":{"rendered":"

\u00bfQu\u00e9 son los React Hooks?<\/h2>\n\n\n\n

Los React Hooks, son funciones que se ejecutan en un determinado punto en la vida de un componente funcional. Permiten usar caracter\u00edsticas de React, sin la necesidad de usar clases. Por ejemplo te permite agregar state<\/strong> a un componente funcional.<\/p>\n\n\n\n

Tambi\u00e9n permite controlar efectos colaterales en caso de ser necesarios. Por ejemplo, peticiones a servicios, subscribirse a eventos, modificar el DOM, logging o cualquier otro c\u00f3digo imperativo.<\/p>\n\n\n\n

\u00bfPor qu\u00e9 funciones y componentes funcionales?<\/h2>\n\n\n\n

Si necesitas m\u00e1s detalles sobre como son las funciones en Javascript, puedes revisar estas dos publicaciones:<\/p>\n\n\n\n

    \n
  1. Functions in Node.js and JavaScript. What's really important<\/a><\/li>\n\n\n\n
  2. Functions in Node.js and Javascript. More details<\/a><\/li>\n<\/ol>\n\n\n\n

    Organizaci\u00f3n y reutilizaci\u00f3n<\/h3>\n\n\n\n

    Se sabe que las funciones son la unida esencial para la organizaci\u00f3n y reutilizaci\u00f3n de c\u00f3digo, es decir, las funcionalidades de cualquier software.<\/p>\n\n\n\n

    Al utilizar funciones se elimina la complejidad de usar clases. No necesitas usar this<\/code>, constructores, ni separar funcionalidades estrechamente relacionadas en varios m\u00e9todos del ciclo de vida de un componente en React.<\/p>\n\n\n\n

    Si has creado componentes en React, de seguro has aprendido ver a los componentes como una funci\u00f3n y sus propiedades como sus par\u00e1metros. \u00bfPor qu\u00e9 no hacerlo m\u00e1s transparentes al usar solamente funciones?<\/p>\n\n\n\n

    De hecho las clases, surgieron de funciones. Como se explica here<\/a> and here<\/a>. No necesitamos clases y nos ahorramos muchos dolores de cabeza.<\/p>\n\n\n\n

    Composici\u00f3n<\/h3>\n\n\n\n

    Es mucho m\u00e1s simple y flexible utilizar funciones en lugar de clases para la composici\u00f3n, tanto de componentes como de cualquier funcionalidad en general.<\/p>\n\n\n\n

    \n

    Better object composition over class inheritance<\/strong><\/p>\nDesign Patterns: Elements of Reusable Object-Oriented Software<\/cite><\/blockquote>\n\n\n\n

    Simplicidad<\/h3>\n\n\n\n

    Normalmente con las clases, el flujo del c\u00f3digo de los efectos colaterales necesita brincar de un m\u00e9todo del ciclo de vida a otro, con React Hooks <\/strong>esto es m\u00e1s lineal y f\u00e1cil de leer. Tambi\u00e9n la definici\u00f3n del estado de un componente es mucho m\u00e1s simple, sin necesidad de definirlo en el constructor.  En el siguiente punto viene un ejemplo de como los React Hooks son m\u00e1s simples.<\/p>\n\n\n\n

    Se elimina el uso de componentes de alto nivel<\/h3>\n\n\n\n

    Aunque los componentes de alto nivel (HOC<\/strong>) se basan en las funciones de alto nivel, la naturaleza del c\u00f3digo HTML y clases hace que esto sea complejo. El c\u00f3digo se vuelve dif\u00edcil de leer y tambi\u00e9n provoca que los componentes envolventes se aniden demasiado.<\/p>\n\n\n\n

    Los React Hooks resuelven el famoso \u201cHOC hell\u201d,<\/strong> muy parecido a como las promesas y funciones as\u00edncronas resuelven el \u201cCallback hell\u201d<\/strong>.<\/p>\n\n\n\n

    \"HOCs,
    HOCs, complejo<\/figcaption><\/figure>\n\n\n\n

    Ahora, si se utilizan React Hooks, esos HOC complejos se convierte en un c\u00f3digo m\u00e1s simple y lineal.<\/p>\n\n\n\n

    \"React
    React hooks, simple y lineal<\/figcaption><\/figure>\n\n\n\n

    M\u00e1s r\u00e1pido<\/h3>\n\n\n\n

    Es un hecho que las funciones tienen mayor rendimiento que las clases. En el caso de React, un componente de funci\u00f3n es m\u00e1s r\u00e1pido que un componente de alto nivel. Adem\u00e1s, usando los React hooks adecuadamente, los componentes con React hooks suelen ser m\u00e1s r\u00e1pidos que los componentes de clases en React.<\/p>\n\n\n\n

    F\u00e1cil de probar<\/h3>\n\n\n\n

    Haciendo tus pruebas correctas evitando detalles de implementaci\u00f3n, tu react hook deber\u00eda estar cubierto con tus pruebas del componente funcional. En otras publicaciones veremos c\u00f3mo hacer esto. En caso de que tengas un React Hook complejo, existen herramientas que te facilitan estas pruebas aisladas o tambi\u00e9n podemos hacer a mano nuestro wrapper que use nuestro React Hook para cada uno de sus casos.<\/p>\n\n\n\n

    Las dos reglas importantes de React Hooks<\/h2>\n\n\n\n

    Solo ejecuta React Hooks en el nivel superior de la funci\u00f3n<\/h3>\n\n\n\n

    La clave de esta regla es que React depende del orden en que se ejecutan los React Hooks.<\/p>\n\n\n\n

    No ejecutes React Hooks dentro de condiciones, ciclos o funciones anidadas porque se necesita asegurar el orden correcto de los hooks cada vez que el componente se renderiza. Esto permite que React controle correctamente el estado entre multiples useState y useEffect.<\/p>\n\n\n\n

    Si existe alguna condici\u00f3n en el c\u00f3digo, y permite que a veces un hook se ejecute y otras no, el orden se pierde al igual que los datos correctos del estado. Hay que aclarar que las condiciones, ciclos y funciones anidadas dentro de los hooks como en el caso de useEffect si son posibles.<\/p>\n\n\n\n

    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    \/\/ No hagos esto!!<\/span><\/span>\nif<\/span> (nombre) <\/span>{<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>document<\/span>.<\/span>title<\/span> <\/span>=<\/span> <\/span>`<\/span>Algo con <\/span>${<\/span>name<\/span>}`<\/span>;<\/span><\/span>\n  <\/span>},<\/span> [<\/span>name<\/span>])<\/span>;<\/span><\/span>\n}<\/span><\/span>\n\/\/ Esto si lo puedes hacer<\/span><\/span>\nuseEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>if<\/span> (<\/span>name<\/span> <\/span>!==<\/span> <\/span>''<\/span>) <\/span>{<\/span><\/span>\n    <\/span>document<\/span>.<\/span>title<\/span> <\/span>=<\/span> <\/span>`<\/span>Algo con <\/span>${<\/span>name<\/span>}`<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n},<\/span> [nombre])<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Solo ejecuta React Hooks dentro de funciones de React<\/h3>\n\n\n\n
      \n
    1. Ejecuta React Hooks dentro de componentes de funci\u00f3n.\n
        \n
      1. En las clases los React Hooks no funcionan, adem\u00e1s en clases ya existen los m\u00e9todos del ciclo de vida de un componente en React.<\/li>\n<\/ol>\n<\/li>\n\n\n\n
      2. Ejecuta React Hooks dentro de otros React Hooks (puedes hacer tus propios hooks).\n
          \n
        1. Para garantizar el orden y controlar correctamente el estado entre m\u00faltiples Hooks. Te permite ejecutar react hooks al inicio de otro hook creado por ti.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n
          Reac Hooks, useState(initialState)<\/h2>\n\n\n\n
          Empecemos con el hook m\u00e1s utilizado, useState<\/strong><\/code>. Este hook proporciona la misma capacidad de los componentes de clases para tener un estado interno. Vamos a hacer un formulario de registro de un usuario nuevo, algo sencillo y gen\u00e9rico, nada de detalles de implementaci\u00f3n espec\u00edficos. Probablemente con el campo nombre ser\u00e1 suficiente.<\/p>\n\n\n\n
          Vamos a utilizar la herramienta de codesandbox.io<\/a>, usando la plantilla de React. Agregamos un archivo RegistroDeUsuario.js<\/code><\/p>\n\n\n\n
          <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
          import<\/span> <\/span>{<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>RegistroDeUsuario<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>name<\/span>,<\/span> <\/span>setNombre<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>""<\/span>)<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>form<\/span>><\/span><\/span>\n      <\/span><<\/span>label<\/span> <\/span>htmlFor<\/span>=<\/span>"<\/span>name<\/span>"<\/span>><\/span>Name<\/span><\/<\/span>label<\/span>><\/span><\/span>\n      <\/span><<\/span>input<\/span><\/span>\n        <\/span>type<\/span>=<\/span>"<\/span>text<\/span>"<\/span><\/span>\n        <\/span>value<\/span>={<\/span>name<\/span>}<\/span><\/span>\n        <\/span>id<\/span>=<\/span>"<\/span>name<\/span>"<\/span><\/span>\n        <\/span>onChange<\/span>={(<\/span>and<\/span>)<\/span> <\/span>=><\/span> <\/span>setNombre<\/span>(e<\/span>.<\/span>target<\/span>.<\/span>value)<\/span>}<\/span><\/span>\n      \/><\/span><\/span>\n      <\/span><<\/span>button<\/span> <\/span>type<\/span>=<\/span>"<\/span>submit<\/span>"<\/span>><\/span>Send<\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><<\/span>section<\/span>>{<\/span>name<\/span>}<\/<\/span>section<\/span>><\/span><\/span>\n    <\/span><\/<\/span>form<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
          Y en el archivo App.js<\/code> importamos el componente RegistroDeUsuario<\/code><\/p>\n\n\n\n
          <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
          import<\/span> RegistroDeUsuario <\/span>from<\/span> <\/span>"<\/span>.\/RegistroDeUsuario<\/span>"<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>App<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>"<\/span>App<\/span>"<\/span>><\/span><\/span>\n      <\/span><<\/span>RegistroDeUsuario<\/span> \/><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
          Desctructuring assignment<\/h3>\n\n\n\n
          Primero, la funci\u00f3n useState(initialState)<\/strong><\/code>, regresa un arreglo de dos elementos, el valor del estado (inicializado) que queremos controlar y un m\u00e9todo para modificar ese estado. Este par de valores se asignaron a las constantes name<\/code> and setNombre<\/code> con la sintaxis de destructuring assignment<\/code>.<\/p>\n\n\n\n
          He desctructuring assignment<\/code> de la l\u00ednea 4 se traduce a lo siguiente.<\/p>\n\n\n\n
          <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
          const<\/span> statePair <\/span>=<\/span> <\/span>useState<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\nconst<\/span> name <\/span>=<\/span> statePair[<\/span>0<\/span>]<\/span>;<\/span><\/span>\nconst<\/span> setNombre <\/span>=<\/span> statePair[<\/span>1<\/span>]<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
          Invocaciones y renderizados<\/h3>\n\n\n\n
          Cada vez que se escribe sobre el campo Name<\/strong>, se vuelve a renderizar el componente. Pero React guarda el estado entre renderizados. Se puede notar como la l\u00ednea 5<\/code> se ejecuta al primer r\u00e9nder (Montar<\/strong>, con texto vac\u00edo) y tambi\u00e9n cada vez que se actualiza el valor de name<\/code> (Actualizar<\/strong>, revisa la consola de la parte derecha de la imagen de abajo).<\/p>\n\n\n\n
          El resultado debe ser algo como lo siguiente.<\/p>\n\n\n\n
          \"Renderizados
          Renderizados por useState input Nombre<\/figcaption><\/figure>\n\n\n\n
          El flujo de useState<\/strong> es el siguiente. Modificado de este original<\/a>.<\/p>\n\n\n\n
          \"Flujo
          Flujo useState<\/figcaption><\/figure>\n\n\n\n
          El valor de name<\/strong><\/code> se actualiza a trav\u00e9s del evento onChange<\/strong><\/code> and the method setNombre<\/strong><\/code>. Al modificar este estado interno, provoca la ejecuci\u00f3n de la funci\u00f3n RegistroDeUsuarios<\/code> y un “re-renderizado”. Si el componente se renderiza debido a un cambio a otro estado u otra propiedad, el estado de name<\/strong><\/code> permanece con la \u00faltima actualizaci\u00f3n.<\/p>\n\n\n\n
          useState(() => { return initialState; })<\/h3>\n\n\n\n
          useState(initialState)<\/strong><\/code> puede recibir una funci\u00f3n que regrese el estado inicial usado en el primer render. Un ejemplo de su uso es el que sige, \u00bfQu\u00e9 podemos hacer si queremos guardar y obtener el estado de localStorage?<\/p>\n\n\n\n
          <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
          import<\/span> <\/span>{<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>RegistroDeUsuario<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>name<\/span>,<\/span> <\/span>setNombre<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>Solo una vez<\/span>"<\/span>)<\/span>;<\/span><\/span>\n    <\/span>return<\/span> <\/span>localStorage<\/span>.<\/span>getItem<\/span>(<\/span>"<\/span>name<\/span>"<\/span>) <\/span>||<\/span> <\/span>""<\/span>;<\/span><\/span>\n  <\/span>}<\/span>)<\/span>;<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>M\u00e1s invocaciones<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>functions<\/span> <\/span>actualizarNombre<\/span>(<\/span>and<\/span>)<\/span> <\/span>{<\/span><\/span>\n    <\/span>setNombre<\/span>(<\/span>and<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>;<\/span><\/span>\n    <\/span>localStorage<\/span>.<\/span>setItem<\/span>(<\/span>"<\/span>name<\/span>"<\/span>,<\/span> <\/span>and<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>form<\/span>><\/span><\/span>\n      <\/span><<\/span>label<\/span> <\/span>htmlFor<\/span>=<\/span>"<\/span>name<\/span>"<\/span>><\/span>Name<\/span><\/<\/span>label<\/span>><\/span><\/span>\n      <\/span><<\/span>input<\/span><\/span>\n        <\/span>type<\/span>=<\/span>"<\/span>text<\/span>"<\/span><\/span>\n        <\/span>value<\/span>={<\/span>name<\/span>}<\/span><\/span>\n        <\/span>id<\/span>=<\/span>"<\/span>name<\/span>"<\/span><\/span>\n        <\/span>onChange<\/span>={<\/span>actualizarNombre<\/span>}<\/span><\/span>\n      \/><\/span><\/span>\n      <\/span><<\/span>button<\/span> <\/span>type<\/span>=<\/span>"<\/span>submit<\/span>"<\/span>><\/span>Send<\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><<\/span>section<\/span>>{<\/span>name<\/span>}<\/<\/span>section<\/span>><\/span><\/span>\n    <\/span><\/<\/span>form<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
          Ahora usamos una funci\u00f3n para definir el estado, le agregamos un console.log('Solo una vez')<\/code> para demostrar que la funci\u00f3n solo se ejecuta una vez.  Y un console.log('M\u00e1s invocaciones')<\/code>  para demostrar que en los siguientes invocaciones ya no se ejecuta la funci\u00f3n de nuestro useState(initialState)<\/code>, pero si el de M\u00e1s invocaciones.<\/code><\/p>\n\n\n\n
          En el resultado de abajo, escrib\u00ed Jaime<\/code> en el campo nombre, luego recargue la p\u00e1gina, revisa el lado derecho en la vista y la consola.<\/p>\n\n\n\n
          \"useState,
          useState, campo nombre en localStorage<\/figcaption><\/figure>\n\n\n\n
          Al recargar se imprime Sola una vez<\/strong><\/code> y al empezar a escribir Cervantes<\/strong><\/code> se imprime M\u00e1s invocaciones<\/code><\/strong> un total de 11 veces. Mi nombre James<\/strong>, lo obtuvo del localStorage<\/strong> al primer renderizado.<\/p>\n\n\n\n
          setState(prevState => {})<\/h3>\n\n\n\n
          El m\u00e9todo para actualizar el estado setNombre<\/strong><\/code> tambi\u00e9n puede recibir una funci\u00f3n, cuyo par\u00e1metro es el valor anterior. Veamos un ejemplo modificando la funci\u00f3n actualizarNombre<\/strong><\/code>.<\/p>\n\n\n\n
          <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
          functions<\/span> <\/span>actualizarNombre<\/span>(<\/span>and<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>setNombre<\/span>(<\/span>nombreAnterior<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>nombreAnterior<\/span>)<\/span>;<\/span> <\/span>\/\/ '', 'J', 'Ja', 'Jai', 'Jaim'<\/span><\/span>\n    <\/span>return<\/span> <\/span>and<\/span>.<\/span>target<\/span>.<\/span>value<\/span>;<\/span><\/span>\n  <\/span>}<\/span>)<\/span>;<\/span><\/span>\n  <\/span>localStorage<\/span>.<\/span>setItem<\/span>(<\/span>"<\/span>name<\/span>"<\/span>,<\/span> <\/span>and<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
          The function setNombre<\/strong><\/code> obtenida de useState<\/code><\/strong> recibe como par\u00e1metro el nombreAnterior<\/strong><\/code>, y al imprimir en la consola nos damos cuenta de que siempre imprimir\u00e1 el valor anterior del estado name<\/strong><\/code>.<\/p>\n\n\n\n
          \"Actualizar
          Actualizar el estado pasando una funci\u00f3n<\/figcaption><\/figure>\n\n\n\n
          useEffect(effectFn, [deps])<\/h2>\n\n\n\n
          Este React hook, useEffect<\/strong>, nos permite ejecutar y controlar efectos colaterales, como pueden ser peticiones a servicios, subscribirse a eventos, modificar el DOM o cualquier funcionalidad que no pueda ejecutarse en el cuerpo de nuestro componente funci\u00f3n porque no pertenece al flujo lineal del mismo.<\/p>\n\n\n\n
          Flujo de useEffect<\/h3>\n\n\n\n
          The function effectFn<\/strong> se ejecuta despu\u00e9s de que el navegador ya ha pintado el componente en pantalla por primera vez (montar<\/strong>). Tambi\u00e9n por defecto despu\u00e9s de cada posterior repintado (actualizar<\/strong>). Este comportamiento descrito tiene el mismo prop\u00f3sito que los m\u00e9todos componentDidMount<\/strong><\/code> and componentDidUpdate<\/strong><\/code>.<\/p>\n\n\n\n
          El tercer prop\u00f3sito en useEffect se le llama limpieza<\/strong>, el cual lo podemos comparar con componentDidUnmount<\/strong><\/code>. En el primer pintado (montar<\/strong>) la funci\u00f3n de limpieza no se ejecuta, solo se ejecuta en la fase de actualizar<\/strong>. Es decir, se ejecuta despu\u00e9s de cada repintando, pero antes del que el cuerpo de useEffect se ejecute. Este caso en espec\u00edfico se explica mejor con ejemplos en this post<\/strong><\/a>.<\/p>\n\n\n\n
          El flujo de useEffect<\/strong> es el siguiente. Modificado de este original<\/a>.<\/p>\n\n\n\n
          \"Flujo
          Flujo useEffect<\/figcaption><\/figure>\n\n\n\n
          useEffect<\/strong> recibe un segundo par\u00e1metro, deps<\/strong>, el cual es un Array con la lista de dependencias que permiten decidir si ejecutar el efecto colateral o no, despu\u00e9s de cada repintado. Sirve bastante para mejorar el rendimiento si no queremos que despu\u00e9s de cada repintado se ejecute effectFn<\/strong>.<\/p>\n\n\n\n
          Si te das cuenta, he usado la palabra pintado<\/strong> en lugar de renderizado<\/strong>. Esto se debe a que efectivamente el efecto se ejecuta despu\u00e9s de que los cambios ya est\u00e9n pintados en el navegador web. El renderizado involucra al Virtual DOM<\/strong>, y React decide en que momento es conveniente actualizar el DOM, pero el pintado sucede un poco despu\u00e9s de lo anterior. Aclaremos que aunque se actualice el DOM, el navegador debe calcular estilos y el layout de los elementos para posteriormente realizar el pintado de los pixeles.<\/p>\n\n\n\n
          useEffect(effectFn)<\/h3>\n\n\n\n
          Veamos un ejemplo, aqu\u00ed la idea es tener un input de b\u00fasqueda y queremos que lo que tengamos en el input se imprima en t\u00edtulo de la pesta\u00f1a de nuestro navegador web. Para poder realizar esto necesitamos un efecto utilizando la API del DOM.<\/p>\n\n\n\n
          De nuevo, con la herramienta codesandbox.io<\/a> y su plantilla de react, creamos un nuevo proyecto. Agregamos un archivo llamado OldNewsPapers.js<\/strong><\/code> donde vivir\u00e1 nuestra funcionalidad en forma de un componente funcional.<\/p>\n\n\n\n
          <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
          import<\/span> <\/span>{<\/span> <\/span>useEffect<\/span>,<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>OldNewsPapers<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>query<\/span>,<\/span> <\/span>setQuery<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>""<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>document.title<\/span>"<\/span>)<\/span>;<\/span><\/span>\n    <\/span>document<\/span>.<\/span>title<\/span> <\/span>=<\/span> <\/span>`<\/span>Periodicos viejos <\/span>${<\/span>query<\/span>}`<\/span>;<\/span><\/span>\n  <\/span>}<\/span>)<\/span>;<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>Invocaci\u00f3n);<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>Peri\u00f3dicos viejos que contienen <\/span>{<\/span>query<\/span>}<\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>form<\/span>><\/span><\/span>\n        <\/span><<\/span>input<\/span><\/span>\n          <\/span>type<\/span>=<\/span>"<\/span>text<\/span>"<\/span><\/span>\n          <\/span>value<\/span>={<\/span>query<\/span>}<\/span><\/span>\n          <\/span>onChange<\/span>={(<\/span>and<\/span>)<\/span> <\/span>=><\/span> <\/span>setQuery<\/span>(e<\/span>.<\/span>target<\/span>.<\/span>value)<\/span>}<\/span><\/span>\n        \/><\/span><\/span>\n      <\/span><\/<\/span>form<\/span>><\/span><\/span>\n    <\/span><\/><\/span><\/span>\n  );<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
          Este efecto se ejecuta despu\u00e9s de la primera vez que se pinta el componente, esto es el primer prop\u00f3sito que se puede comparar con componentDidMount<\/code><\/strong>. \u00bfC\u00f3mo es el flujo?<\/p>\n\n\n\n
            \n
          1. Se ejecuta la funci\u00f3n, es decir, el componente funcional.\n
              \n
            1. Lo cual inicializa el estado de query<\/code> y el efecto colateral.<\/li>\n<\/ol>\n<\/li>\n\n\n\n
            2. Se renderiza y se pinta el elemento de react en el navegador con el valor inicial de query = ''<\/code>.\n
                \n
              1. Texto \u201cPeri\u00f3dicos viejos que contienen\u201d en el <h1><\/code>.<\/li>\n<\/ol>\n<\/li>\n\n\n\n
              2. Se ejecuta el efecto colateral despu\u00e9s del primer pintado.\n
                  \n
                1. Texto \u201cPeri\u00f3dicos viejos que\u201d<\/strong>  en el t\u00edtulo de la pesta\u00f1a.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n
                  \"useEffect
                  useEffect flujo al montar<\/figcaption><\/figure>\n\n\n\n
                  Si escribimos “texas”<\/strong> en el input, ahora el flujo es de la siguiente manera<\/p>\n\n\n\n
                    \n
                  1. Cada vez que se introduce una letra en el input (cinco veces m\u00e1s, por las cinco letras de \u201ctexas\u201d<\/strong>)\n
                      \n
                    1. El estado de query<\/code> cambia debido al setQuery<\/code> en el onChange<\/strong>, provocando un nuevo pintado (invocaci\u00f3n del componente funci\u00f3n, renderizado y finalmente pintado).<\/li>\n\n\n\n
                    2. Despu\u00e9s del pintado se actualiza document.title<\/code>, cambiando el t\u00edtulo de la pesta\u00f1a del navegador web.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n
                      \"useEffect,
                      useEffect, flujo actualizar document.title<\/figcaption><\/figure>\n\n\n\n
                      En la imagen de arriba vemos seis \u201cdocument.title\u201d, como describimos al principio, por defecto el useEffect se invoca despu\u00e9s de cada pintado en el navegador web.<\/strong><\/p>\n\n\n\n
                      Puedes ver el c\u00f3digo completo en here<\/a>.<\/p>\n\n\n\n
                      useEffect(effectFn, [deps])<\/h3>\n\n\n\n
                      En el \u00faltimo ejemplo nuestro efecto se va a ejecutar despu\u00e9s de cada pintado, incluso si el estado de query<\/code> no ha cambiado. Para comprobar esto vamos a agregar otro estado para llevar la cuenta del n\u00famero de invocaciones de nuestro componente funcional, que se traduce en el n\u00famero de renderizados realizados. Estas invocaciones las haremos a trav\u00e9s de un bot\u00f3n.<\/p>\n\n\n\n
                      <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
                      import<\/span> <\/span>{<\/span> <\/span>useEffect<\/span>,<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>OldNewsPapers<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>query<\/span>,<\/span> <\/span>setQuery<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>""<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>invocations<\/span>,<\/span> <\/span>setInvocations<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>1<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>document.title<\/span>"<\/span>)<\/span>;<\/span><\/span>\n    <\/span>document<\/span>.<\/span>title<\/span> <\/span>=<\/span> <\/span>`<\/span>Peri\u00f3dicos viejos <\/span>${<\/span>query<\/span>}`<\/span>;<\/span><\/span>\n  <\/span>}<\/span>)<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>Peri\u00f3dicos viejos que contienen <\/span>{<\/span>query<\/span>}<\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>p<\/span>>{<\/span>invocations<\/span>}<\/span> Invocaciones<\/span><\/<\/span>p<\/span>><\/span><\/span>\n      <\/span><<\/span>form<\/span>><\/span><\/span>\n        <\/span><<\/span>input<\/span><\/span>\n          <\/span>type<\/span>=<\/span>"<\/span>text<\/span>"<\/span><\/span>\n          <\/span>value<\/span>={<\/span>query<\/span>}<\/span><\/span>\n          <\/span>onChange<\/span>={(<\/span>and<\/span>)<\/span> <\/span>=><\/span> <\/span>setQuery<\/span>(e<\/span>.<\/span>target<\/span>.<\/span>value)<\/span>}<\/span><\/span>\n        \/><\/span><\/span>\n        <\/span><<\/span>button<\/span><\/span>\n          <\/span>onClick<\/span>={(<\/span>and<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n            <\/span>and<\/span>.<\/span>preventDefault<\/span>()<\/span>;<\/span><\/span>\n            <\/span>setInvocations<\/span>(<\/span>(<\/span>prev<\/span>)<\/span> <\/span>=><\/span> <\/span>prev<\/span> <\/span>+<\/span> <\/span>1<\/span>)<\/span>;<\/span><\/span>\n          <\/span>}}<\/span><\/span>\n        ><\/span><\/span>\n          Invocar<\/span><\/span>\n        <\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><\/<\/span>form<\/span>><\/span><\/span>\n    <\/span><\/><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
                      Inicializamos invocations<\/code><\/strong> con 1<\/strong><\/code>, porque la primera vez que se renderiza ser\u00e1 el estado actual. Luego si oprimimos el bot\u00f3n Invocar<\/strong>, se cambia el valor de invocations<\/code><\/strong>, se hace otro re-renderizado, y luego se vuelve a ejecutar nuestro efecto, incluso cuando query<\/code><\/strong> no ha cambiado.<\/p>\n\n\n\n
                      \"useEffect
                      useEffect por defecto siempre se ejecuta despu\u00e9s de cada pintado<\/figcaption><\/figure>\n\n\n\n
                      Para evitar que se ejecute demasiadas veces nuestro efecto, podemos indicarle que corra solo cuando una de sus dependencias ha cambiado. En este caso para evitar que se le asigne a cada rato el valor a documen.title<\/strong><\/code>, le indicamos que solo lo haga cuando query<\/strong><\/code> cambia.<\/p>\n\n\n\n
                      <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
                      import<\/span> <\/span>{<\/span> <\/span>useEffect<\/span>,<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>OldNewsPapers<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>query<\/span>,<\/span> <\/span>setQuery<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>""<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>invocations<\/span>,<\/span> <\/span>setInvocations<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>1<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>document.title<\/span>"<\/span>)<\/span>;<\/span><\/span>\n    <\/span>document<\/span>.<\/span>title<\/span> <\/span>=<\/span> <\/span>`<\/span>Peri\u00f3dicos viejos <\/span>${<\/span>query<\/span>}`<\/span>;<\/span><\/span>\n  <\/span>},<\/span> [<\/span>query<\/span>])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> ( <\/span>...<\/span> )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
                      Ahora podemos ver que aunque hicimos muchas invocaciones con el bot\u00f3n \u201cinvocar\u201d, document.title<\/strong><\/code> solo se ejecut\u00f3 la primera vez.<\/p>\n\n\n\n
                      \"useEffect
                      useEffect se ejecuta solo cuando alguna “deps” cambie<\/figcaption><\/figure>\n\n\n\n
                      useEffect(effectFn, [])<\/h3>\n\n\n\n
                      Cuando se especifica un Array vac\u00edo en las deps<\/strong>, effectFn solo se ejecuta una sola vez, despu\u00e9s del primer pintado.<\/p>\n\n\n\n
                      <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
                      import<\/span> <\/span>{<\/span> <\/span>useEffect<\/span>,<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>OldNewsPapers<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>query<\/span>,<\/span> <\/span>setQuery<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>""<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>invocations<\/span>,<\/span> <\/span>setInvocations<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>1<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>document.title<\/span>"<\/span>)<\/span>;<\/span><\/span>\n    <\/span>document<\/span>.<\/span>title<\/span> <\/span>=<\/span> <\/span>`<\/span>Peri\u00f3dicos viejos <\/span>${<\/span>query<\/span>}`<\/span>;<\/span><\/span>\n  <\/span>},<\/span> [])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> ( <\/span>...<\/span> )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
                      Las siguientes veces que se actualice query<\/strong><\/code> escribiendo en el input, el t\u00edtulo de la pesta\u00f1a ya no se actualiza.<\/p>\n\n\n\n
                      \"useEffect
                      useEffect con deps vac\u00edo<\/figcaption><\/figure>\n\n\n\n
                      Conclusi\u00f3n sobre<\/h2>\n\n\n\n
                      Las funciones han existido desde mucho antes de la programaci\u00f3n, gracias al c\u00e1lculo lambda de Alonzo Church. No es extra\u00f1o que en los \u00faltimos a\u00f1os el desarrollo de software ha volteado hacia la functional programming<\/a> debido a la simplicidad y el poder expresivo. Resolviendo varios problemas en el camino. <\/p>\n\n\n\n
                      Y bueno, con el uso de React Hooks, se ha dado un paso muy importante debido a los beneficios que es programar de esta manera, desde hace a\u00f1os que se utilizaban componentes funcionales, y ahora con esto creo que React tiene m\u00e1s futuro prometedor por delante.<\/p>\n\n\n\n
                      Hemos entendido, con suficiente profundidad (para comenzar con hooks), como funcionan los flujos de los Hooks useState y useEffect<\/strong>. De useEffect<\/strong> a\u00fan quedan temas por ver, as\u00ed como tambi\u00e9n los React Hooks personalizados. Aqu\u00ed<\/strong> pondr\u00e9 el enlace con los temas pendientes, cuando estos est\u00e9n publicados. Cualquier duda, no dudes en escribirla en los comentarios, \u00a1Estaremos contentos de ayudarte!.<\/p>\n\n\n\n
                      References<\/h2>\n\n\n\n
                      https:\/\/reactjs.org\/docs\/hooks-intro.html<\/a><\/p>\n\n\n\n
                      https:\/\/reactjs.org\/docs\/hooks-state.html<\/a><\/p>\n\n\n\n
                      https:\/\/reactjs.org\/docs\/hooks-effect.html<\/a><\/p>\n\n\n\n
                      Foto de fondo de portada por  Artem Sapegin<\/a> in Unsplash<\/a><\/p>","protected":false},"excerpt":{"rendered":"
                      \u00bfQu\u00e9 son los React Hooks? Los React Hooks, son funciones que se ejecutan en un determinado punto en la vida de un componente funcional. Permiten usar caracter\u00edsticas de React, sin la necesidad de usar clases. Por ejemplo te permite agregar state a un componente funcional. Tambi\u00e9n permite controlar efectos colaterales en caso de ser necesarios. […]<\/p>","protected":false},"author":2,"featured_media":3715,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[28,35],"tags":[42,54,73,74],"class_list":["post-2998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-react","tag-componentes-web","tag-javascript","tag-react","tag-react-hooks"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/2998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=2998"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/2998\/revisions"}],"predecessor-version":[{"id":3802,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/2998\/revisions\/3802"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3715"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=2998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=2998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=2998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}