dbritto-dev · June 24, 2021 16:13 · Jun 24, 2021 · Aug 1, 2020 · Jul 31, 2020 · Jul 31, 2020
diff --git a/redux-like.jsx b/redux-like.jsx
@@ -154,7 +154,7 @@ export const UnAuthenticatedApp = () => {
 
   return (
     <div>
-      <input type="text" value={user} onChange={e => setUser(e.target.valye)} placeholder="Insert you username" />
+      <input type="text" value={user} onChange={e => setUser(e.target.value)} placeholder="Insert you username" />
       <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Insert your password" />
       <button type="button" onClick={async () => await login(authDispatch)(user, password)}>Login</button>
     </div>

diff --git a/redux-like.jsx b/redux-like.jsx
@@ -136,7 +136,7 @@ export const AuthenticatedApp = () => {
   return (
     <div>
       <h1>{authState.user.name}</h1>
-      <button type="button" onClick={() => authDispatch(logout())}>Logout</button>
+      <button type="button" onClick={async () => await logout(authDispatch)()}>Logout</button>
     </div>
   )
 }
@@ -156,7 +156,7 @@ export const UnAuthenticatedApp = () => {
     <div>
       <input type="text" value={user} onChange={e => setUser(e.target.valye)} placeholder="Insert you username" />
       <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Insert your password" />
-      <button type="button" onClick={() => authDispatch(login(user, password))}>Login</button>
+      <button type="button" onClick={async () => await login(authDispatch)(user, password)}>Login</button>
     </div>
   )
 }

diff --git a/redux-like.jsx b/redux-like.jsx
@@ -0,0 +1,175 @@
+// contexts/auth-context.js
+import React, { useReducer, useContext, createContext } from 'react' 
+
+export const AuthStateContext = createContext()
+
+export const AuthDispatchContext = createContext()
+
+export const AuthProvider = ({ initialState, reducer, children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState)
+
+  return (
+    <AuthStateContext.Provider value={state}>
+      <AuthDispatchContext.Provider value={dispatch}>
+        {children}
+      </AuthDispatchContext.Provider>
+    </AuthStateContext.Provider> 
+  )
+}
+
+export const useAuthState = () => {
+  const state = useContext(AuthStateContext)
+
+  if (state === undefined) {
+    throw new Error(`useAuthState must be within a AuthProvider`)
+  }
+
+  return state;
+}
+
+export const useAuthDispatch = () => {
+  const dispatch = useContext(AuthDispatchContext)
+
+  if (dispatch === undefined) {
+    throw new Error(`useAuthDispatch must be used within an AuthProvider`)
+  }
+
+  return dispatch;
+}
+
+// reducers/auth-reducer.js
+export const authInitialState = {
+  user: null,
+  loading: false,
+  error: '',
+}
+
+export const authReducer = (state, action) => {
+  switch(action.type) {
+    case 'RESET_STATE': {
+      return authInitialState;
+    }
+    case 'LOGIN': {
+      return { ...state, loading: true }
+    }
+    case 'LOGIN.DONE': {
+      return { ...state, loading: false, user: action.payload }
+    }
+    case 'LOGIN.FAIL': {
+      return { ...state, loading: false, error: action.payload }
+    }
+    case 'LOGOUT': {
+      return { ...state, loading: true }
+    }
+    case 'LOGOUT.DONE': {
+      return { ...state, loading: false, user: null }
+    }
+    case 'LOGOUT.FAIL': {
+      return { ...state, loading: false, error: action.payload }
+    }
+    default: {
+      throw new Error(`The ${action.type} doesn't exists.`)
+    }
+  }
+}
+
+// actions/auth-actions.js
+// Pollyfill for fetch suggested: unfetch
+// How to use: import fetch from 'unfetch'
+export const login = (dispatch) => async (user, password) => {
+  try {
+    dispatch({ type: 'LOGIN' })
+
+    const response = fetch(`http://awesome.api/user/login/`, {
+      body: JSON.stringify({ user, password }),
+      headers: { 'Content-Type': 'application/json' },
+    })
+    const user = response.json()
+
+    dispatch({ type: 'LOGIN.DONE', payload: user })
+  } catch(e) {
+    console.error(`<auth-actions:login>: ${e.message}`)
+
+    dispatch({ type: 'LOGIN.FAIL', payload: e.message })
+  }
+}
+
+export const logout = (dispatch) => async () => {
+  try {
+    dispatch({ type: 'LOGOUT' })
+
+    const response = fetch(`http://awesome.api/user/logout`)
+
+    dispatch({ type: 'LOGOUT.DONE' })
+  } catch(e) {
+    console.error(`<auth-actions:logout>: ${e.message}`)
+
+    dispatch({ type: 'LOGOUT.FAIL', payload: e.message })
+  }
+}
+
+// index.js
+import React from 'react'
+import { AuthProvider } from 'contexts/auth-context'
+import { authInitialState, authReducer } from 'reducers/auth-reducer'
+import { App } from 'App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <AuthProvider initialState={authInitialState} reducer={authReducer}>
+      <App />
+    </AuthProvider>
+  </React.StrictMode>,
+  document.getElementById("root")
+);
+
+// components/AuthenticatedApp
+import React from 'react'
+
+import { useAuthState, useAuthDispatch } from 'components/auth-context'
+import { logout } from 'actions/auth-actions'
+
+export const AuthenticatedApp = () => {
+  const authState = useAuthState()
+  const authDispatch = useAuthDispatch()
+
+  return (
+    <div>
+      <h1>{authState.user.name}</h1>
+      <button type="button" onClick={() => authDispatch(logout())}>Logout</button>
+    </div>
+  )
+}
+
+// components/UnAuthenticatedApp
+import React, { useState } from 'react'
+
+import { useAuthDispatch } from 'components/auth-context'
+import { login } from 'actions/auth-actions'
+
+export const UnAuthenticatedApp = () => {
+  const [user, setUser] = useState('')
+  const [password, setPassword] = useState('')
+  const authDispatch = useAuthDispatch()
+
+  return (
+    <div>
+      <input type="text" value={user} onChange={e => setUser(e.target.valye)} placeholder="Insert you username" />
+      <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Insert your password" />
+      <button type="button" onClick={() => authDispatch(login(user, password))}>Login</button>
+    </div>
+  )
+}
+
+// App.js
+import React, {} from 'react'
+
+import { AuthenticatedApp } from 'components/AuthenticatedApp'
+import { UnAuthenticatedApp } from 'components/UnAuthenticatedApp'
+
+import { useAuthState } from 'contexts/auth-context.js'
+
+export const App = () => {
+  const authState = useAuthState()
+  return authState.user ? <AuthenticatedApp /> : <UnAuthenticatedApp />
+}
diff --git a/useCallback.jsx b/useCallback.jsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import React, { useCallback } from 'react'
 
 // Hook: useCallback
 const callbackMemoizado = useCallback(() => {

diff --git a/useContext-and-Context-API.jsx b/useContext-and-Context-API.jsx
@@ -1,4 +1,4 @@
-import { useContext, createContext } from 'react'
+import React, { useContext, createContext } from 'react'
 
 // Hook: useContext
 // Context API: createContext()
@@ -19,7 +19,7 @@ const useSomeContext = () => {
   const someContext = useContext(SomeContext);
 
   if (someContext === undefined) {
-    throw new Error(`useSomeContext debe ser usando dentro de Provider`)
+    throw new Error(`useSomeContext debe ser usado dentro de Provider`)
   }
 
   return someContext;

diff --git a/useState.js b/useState.js
@@ -11,14 +11,16 @@ const [firstName, setFirstName] = useState('')
 const [lastName, setLastName] = useState('')
 const [fullName, setFullName] = useState(`${lastName}, ${firstName}`)
 // ✍️ Nota: cuando el valor a actualizar es generado a partir del estado actual
-// es mejor usar una funcion para definir el siguiente estado. Por ejemplo:
-// Cuando creamos un contador usamos el estado anterior para calcular el 
-// siguiente estado: estado -> contador = contador + 1
-// Por lo que la forma correcta es definir el estado es mediante una función
-// de tal manera de que nos aseguremos que estamos usando el último estado.
+// es mejor usar una funcion para definir el siguiente estado. 
+
+// Por ejemplo: cuando creamos un contador usamos el estado anterior para calcular el 
+// siguienteestado (contador = contador + 1) por lo que la forma correcta es definir 
+// el estado es mediante una función de tal manera de que podamos acceder de manera segura
+// a el último estado.
 const [count, setCount] = useState(0)
-// No es seguro usar el estado fuera del metodo del metodo para actualizar el estado
-// si es que queremos calcular el nuevo estado basado en el estado actual.
+// ✍️ Nota: no es seguro usar el estado fuera del metodo del metodo para actualizar el estado
+// si es que queremos calcular el nuevo estado basado en el estado actual, sobre todo
+// si dicha acción se ejecuta de manera asíncrona.
 setCount(count + 1) ❌
 // ✨ Tip: podemos pasar una función como parametro el cual recibe el estado actual,
 // por lo tanto podemos calcular el siguiente estado de forma segura.

diff --git a/useEffect.js b/useEffect.js
@@ -49,10 +49,10 @@ useEffect(() => {
 // ✍️ Nota: Es importante declarar la lista de dependencias al definir el useEffect
 // y no usar declarar afuera y asignarle el valor al `useEffect` como en el
 // siguiente ejemplo:
-const dependencias = [primeraDependencia, segundaDependecia, terceraDepdendencia] ❌
+const dependencias = [primeraDependencia, segundaDependencia, terceraDependencia] ❌
 useEffect(() => {}, dependencias) ❌
 // crear la lista de dependencias como parte del `useEffect`
-useEffect(() => {}, [primeraDependencia, segundaDependecia, terceraDepdendencia]) ✔️
+useEffect(() => {}, [primeraDependencia, segundaDependencia, terceraDependencia]) ✔️
 // ✨ Tip: podemos cargar información dinámicamente usando como dependencia el valor
 // de algun dato que necesitemos para cargar la información. Un ejemplo puede ser que
 // necesitemos cargar los datos del usuario según el identificador del usuario, como

diff --git a/useMemo.js b/useMemo.js
@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 // Hook: useMemo
 useMemo(() => procesosPesados(), [...dependencias])
 

diff --git a/useCallback.js → useCallback.jsx b/useCallback.js → useCallback.jsx
diff --git a/useContext-and-Context-API.js → useContext-and-Context-API.jsx b/useContext-and-Context-API.js → useContext-and-Context-API.jsx
diff --git a/useReducer.js → useReducer.jsx b/useReducer.js → useReducer.jsx
diff --git a/useCallback.js b/useCallback.js
@@ -1,23 +1,23 @@
 import { useCallback } from 'react'
 
 // Hook: useCallback
-useCallback(() => {
+const callbackMemoizado = useCallback(() => {
   // contenido de tu función de retorno (callback)
 }, [...dependencias])
 
 // Usos de useCallback
 
-// Podemos usar useCallback para crear una funcion que queremos que se
+// Podemos usar useCallback para crear una función que se
 // cree unicamente cuando alguna de sus dependencias sufra algun cambio
-// o se actualize, debido a que pasaremos dicha funcion a otro componente
+// o se actualize, debido a que pasaremos dicha función a otro componente
 // y no queremos que se renderize a causa de que la funcion se re-cree
-// como conscuencia de los eventos que ocurran en el componente de esta manera
-// podremos evitar que el componente hijo al que le pasemos dicha funcion 
+// como conscuencia de los eventos que ocurran en el componente, de esta manera
+// podremos evitar que el componente hijo al que le pasemos dicha función 
 // se renderize innecesariamente.
 
-// Por ejemplo: imaginemos que queremos crear una funcion que luego usaremos
-// para construir una consulta la cual usaremos luego para traer cierta información
-// usando como dependencia un servicio que se crea dinamicamente
+// Por ejemplo: imaginemos que queremos crear una función que luego usaremos
+// para construir una consulta que se usará posteriormentet para traer cierta información
+// usando como dependencia un servicio que se crea dinámicamente.
 const getPlaceQuery = useCallback(() => createQuery(service), [service])
 
 <ChildComponent getPlaceQuery={getPlaceQuery} />

diff --git a/useContext-and-Context-API.js b/useContext-and-Context-API.js
@@ -27,7 +27,7 @@ const useSomeContext = () => {
 
 // Usos del useContext y Context API
 
-// Podemos usar useContext + Context API para enviar cierta información
+// Podemos usar useContext y Context API para enviar cierta información
 // que queremos compartir en varios componentes que no se encuentran en 
 // el mismo nivel o padre.
 

diff --git a/useEffect.js b/useEffect.js
@@ -51,7 +51,7 @@ useEffect(() => {
 // siguiente ejemplo:
 const dependencias = [primeraDependencia, segundaDependecia, terceraDepdendencia] ❌
 useEffect(() => {}, dependencias) ❌
-// Tip: crear la lista de depedencias como parte del `useEffect`
+// crear la lista de dependencias como parte del `useEffect`
 useEffect(() => {}, [primeraDependencia, segundaDependecia, terceraDepdendencia]) ✔️
 // ✨ Tip: podemos cargar información dinámicamente usando como dependencia el valor
 // de algun dato que necesitemos para cargar la información. Un ejemplo puede ser que

diff --git a/useMemo.js b/useMemo.js
@@ -1,14 +1,12 @@
 // Hook: useMemo
-useMemo(() => procesosPesados(), [...depedencias])
+useMemo(() => procesosPesados(), [...dependencias])
 
 // Usos del useMemo
 
 // Podemos usar useMemo para evitar ejecutar procesos pesados o calculos
-// pesados: filtrar, ordenar, etc. 
+// pesados: filtrar, ordenar, fibonacci, etc. 
 
-// Por ejemplo: queremos filtrar una lista enorme de cientos de datos
-// imaginemos que es una lista de usuarios y queremos devolver solo los
-// usuarios cuyo estado es 3
+// usuarios y queremos devolver solo los usuarios cuyo estado es 3
 const usuariosFiltrados = useMemo(
   () => usuarios.filter(usuario => usuario.status == 3), 
   [usuarios]

diff --git a/useReducer.js b/useReducer.js
@@ -1,21 +1,22 @@
 import { useReducer } from 'react'
 
 // Hook: useReducer
-useReducer((estado, accion) => {
+const [estado, disparador] = useReducer((estado, accion) => {
   // Codigo para calcular el nuevo estado basado en la acción
   // nuevoEstado = f(estado, accion)
-}, estadoInitial)
+}, estadoInicial)
 
+// ✍️ Nota: el estado inicial no necesariamente tiene que ser un objecto
 
 // Usos del useReducer
 
-// Podemos usar useReducer usando conocimiento previos de redux
-// debido a que useReducer usa una funcion para calcular el nuevo
-// estado tal y cual lo hace redux
+// Podemos usar useReducer usando conocimientos previos de redux
+// debido a que useReducer usa una función para calcular el nuevo
+// estado tal y cual lo hace redux.
 
 // Por ejemplo: imaginemos que queremos crear un contador usando 
 // useReducer para delimitar y tener mas control sobre las acciones
-// permitidas para interactuar con nuestro contador.
+// permitidas para interactuar con el estado.
 
 const [state, dispatch] = useReducer((state, action) => {
   switch(action.type) {
@@ -39,6 +40,6 @@ console.log(state)
 dispatch({ type: 'DECREMENT' })
 console.log(state)
 
-// ✨ Tip: podemos reemplazar la mayoria de casos de uso de para
+// ✨ Tip: podemos reemplazar la mayoria de casos de uso de redux para
 // la gestion de estados locales (dentro del component) y externos mediante
 // el uso de useContext y Context API.
diff --git a/useState.js b/useState.js
@@ -20,6 +20,6 @@ const [count, setCount] = useState(0)
 // No es seguro usar el estado fuera del metodo del metodo para actualizar el estado
 // si es que queremos calcular el nuevo estado basado en el estado actual.
 setCount(count + 1) ❌
-// ✨ Tip: Podemos pasar una función como parametro el cual recibe el estado actual,
+// ✨ Tip: podemos pasar una función como parametro el cual recibe el estado actual,
 // por lo tanto podemos calcular el siguiente estado de forma segura.
 setCount(currentCount => currentCount + 1) ✔️
diff --git a/useState.js b/useState.js
@@ -10,16 +10,16 @@ const [estado, definirEstado] = useState(estadoInicial)
 const [firstName, setFirstName] = useState('')
 const [lastName, setLastName] = useState('')
 const [fullName, setFullName] = useState(`${lastName}, ${firstName}`)
-// ✍️ Nota: cuando el valor a actualizar es generado apartir del estado actual
+// ✍️ Nota: cuando el valor a actualizar es generado a partir del estado actual
 // es mejor usar una funcion para definir el siguiente estado. Por ejemplo:
 // Cuando creamos un contador usamos el estado anterior para calcular el 
-// siguiente estado -> countador = countador + 1
-// Por lo que la forma correcta de definir el estado es mediante una función
+// siguiente estado: estado -> contador = contador + 1
+// Por lo que la forma correcta es definir el estado es mediante una función
 // de tal manera de que nos aseguremos que estamos usando el último estado.
 const [count, setCount] = useState(0)
 // No es seguro usar el estado fuera del metodo del metodo para actualizar el estado
 // si es que queremos calcular el nuevo estado basado en el estado actual.
 setCount(count + 1) ❌
-// ✨ Tip: Podemos pasar una funcion como parametro el cual recibe el estado actual.
-// Y por lo tanto podemos calcular el siguiente estado de forma segura.
+// ✨ Tip: Podemos pasar una función como parametro el cual recibe el estado actual,
+// por lo tanto podemos calcular el siguiente estado de forma segura.
 setCount(currentCount => currentCount + 1) ✔️
diff --git a/useContext-and-Context-API.js b/useContext-and-Context-API.js
@@ -19,7 +19,7 @@ const useSomeContext = () => {
   const someContext = useContext(SomeContext);
 
   if (someContext === undefined) {
-    throw new Error(`useAuth debe ser usando dentro de AuthProvider`)
+    throw new Error(`useSomeContext debe ser usando dentro de Provider`)
   }
 
   return someContext;

diff --git a/useContext-and-Context-API.js b/useContext-and-Context-API.js
@@ -8,7 +8,7 @@ const SomeContext = createContext()
 const valueToSharedAcrossAllComponents = {
   someData: 'Some data to share'
 };
-const Provider = () => {
+const Provider = ({ children }) => {
   return (
     <SomeContext.Provider value={valueToSharedAcrossAllComponents}>
       {children}

diff --git a/useEffect.js b/useEffect.js
@@ -66,4 +66,5 @@ useEffect(() => {
       window.alert(`Error: Ha ocurrido un error al intentar cargar los datos del usuario: ${userId}`)
     }
   }
+  getDataAsync()
 }, [userId])
diff --git a/useContext-and-Context-API.js b/useContext-and-Context-API.js
@@ -2,3 +2,51 @@ import { useContext, createContext } from 'react'
 
 // Hook: useContext
 // Context API: createContext()
+
+const SomeContext = createContext()
+
+const valueToSharedAcrossAllComponents = {
+  someData: 'Some data to share'
+};
+const Provider = () => {
+  return (
+    <SomeContext.Provider value={valueToSharedAcrossAllComponents}>
+      {children}
+    </SomeContext.Provider>
+  )
+}
+const useSomeContext = () => {
+  const someContext = useContext(SomeContext);
+
+  if (someContext === undefined) {
+    throw new Error(`useAuth debe ser usando dentro de AuthProvider`)
+  }
+
+  return someContext;
+}
+
+// Usos del useContext y Context API
+
+// Podemos usar useContext + Context API para enviar cierta información
+// que queremos compartir en varios componentes que no se encuentran en 
+// el mismo nivel o padre.
+
+// Por ejemplo: si queremos compartir el tema de la aplicación a todos los
+// componentes de la aplicación.
+const theme = { color: 'peru', fontFamily: 'Roboto' }
+
+const ThemeContext = createContext()
+
+const ThemeProvider = ({ theme, children }) => {
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+}
+
+const useTheme = () => {
+  const theme = useContext(ThemeContext);
+
+  if (theme === undefined) {
+    throw new Error(`useTheme debe ser usando dentro de ThemeProvider`)
+  }
+
+  return theme;
+}
diff --git a/useRef.js b/useRef.js
@@ -1 +0,0 @@
-import { useRef } from 'react'

diff --git a/useCallback.js b/useCallback.js
@@ -1 +1,24 @@
-useCallback
+import { useCallback } from 'react'
+
+// Hook: useCallback
+useCallback(() => {
+  // contenido de tu función de retorno (callback)
+}, [...dependencias])
+
+// Usos de useCallback
+
+// Podemos usar useCallback para crear una funcion que queremos que se
+// cree unicamente cuando alguna de sus dependencias sufra algun cambio
+// o se actualize, debido a que pasaremos dicha funcion a otro componente
+// y no queremos que se renderize a causa de que la funcion se re-cree
+// como conscuencia de los eventos que ocurran en el componente de esta manera
+// podremos evitar que el componente hijo al que le pasemos dicha funcion 
+// se renderize innecesariamente.
+
+// Por ejemplo: imaginemos que queremos crear una funcion que luego usaremos
+// para construir una consulta la cual usaremos luego para traer cierta información
+// usando como dependencia un servicio que se crea dinamicamente
+const getPlaceQuery = useCallback(() => createQuery(service), [service])
+
+<ChildComponent getPlaceQuery={getPlaceQuery} />
+
diff --git a/useContext-and-Context-API.js b/useContext-and-Context-API.js
@@ -1 +1,4 @@
-useContext + Context API
+import { useContext, createContext } from 'react'
+
+// Hook: useContext
+// Context API: createContext()
diff --git a/useMemo.js b/useMemo.js
@@ -1 +1,15 @@
-useMemo
+// Hook: useMemo
+useMemo(() => procesosPesados(), [...depedencias])
+
+// Usos del useMemo
+
+// Podemos usar useMemo para evitar ejecutar procesos pesados o calculos
+// pesados: filtrar, ordenar, etc. 
+
+// Por ejemplo: queremos filtrar una lista enorme de cientos de datos
+// imaginemos que es una lista de usuarios y queremos devolver solo los
+// usuarios cuyo estado es 3
+const usuariosFiltrados = useMemo(
+  () => usuarios.filter(usuario => usuario.status == 3), 
+  [usuarios]
+)
diff --git a/useReducer.js b/useReducer.js
@@ -1 +1,44 @@
-useReducer
+import { useReducer } from 'react'
+
+// Hook: useReducer
+useReducer((estado, accion) => {
+  // Codigo para calcular el nuevo estado basado en la acción
+  // nuevoEstado = f(estado, accion)
+}, estadoInitial)
+
+
+// Usos del useReducer
+
+// Podemos usar useReducer usando conocimiento previos de redux
+// debido a que useReducer usa una funcion para calcular el nuevo
+// estado tal y cual lo hace redux
+
+// Por ejemplo: imaginemos que queremos crear un contador usando 
+// useReducer para delimitar y tener mas control sobre las acciones
+// permitidas para interactuar con nuestro contador.
+
+const [state, dispatch] = useReducer((state, action) => {
+  switch(action.type) {
+    case 'INCREMENT': {
+      return state + 1;
+    }
+    case 'DECREMENT': {
+      return state - 1:
+    }
+    default: {
+      throw new Error(`The ${action.type} is not permitted.`)
+    }
+  }
+}, 0)
+
+// Ahora podemos usar `dispatch` para trabajar sobre nuestro contador
+dispatch({ type: 'INCREMENT' })
+console.log(state)
+dispatch({ type: 'INCREMENT' })
+console.log(state)
+dispatch({ type: 'DECREMENT' })
+console.log(state)
+
+// ✨ Tip: podemos reemplazar la mayoria de casos de uso de para
+// la gestion de estados locales (dentro del component) y externos mediante
+// el uso de useContext y Context API.
diff --git a/useRef.js b/useRef.js
@@ -1 +1 @@
-useRef
+import { useRef } from 'react'
diff --git a/useEffect.js b/useEffect.js
@@ -1,3 +1,5 @@
+import { useEffect } from 'react'
+
 // Hook: useEffect 
 useEffect(() => {
   // Ejecuta esto:
@@ -47,9 +49,11 @@ useEffect(() => {
 // ✍️ Nota: Es importante declarar la lista de dependencias al definir el useEffect
 // y no usar declarar afuera y asignarle el valor al `useEffect` como en el
 // siguiente ejemplo:
-const dependencias = [primeraDependencia, segundaDependecia, terceraDepdendencia]; ❌
+const dependencias = [primeraDependencia, segundaDependecia, terceraDepdendencia] ❌
 useEffect(() => {}, dependencias) ❌
-// ✨ Tip: Podemos cargar información dinámicamente usando como dependencia el valor
+// Tip: crear la lista de depedencias como parte del `useEffect`
+useEffect(() => {}, [primeraDependencia, segundaDependecia, terceraDepdendencia]) ✔️
+// ✨ Tip: podemos cargar información dinámicamente usando como dependencia el valor
 // de algun dato que necesitemos para cargar la información. Un ejemplo puede ser que
 // necesitemos cargar los datos del usuario según el identificador del usuario, como
 // haremos en el siguiente ejemplo:

diff --git a/useState.js b/useState.js
@@ -1 +1,25 @@
-useState
+import { useState } from 'react'
+
+// Hook: useState
+const [estado, definirEstado] = useState(estadoInicial)
+
+// Usos del useState
+
+// Podemos manejar multiples estados y utilizar dichos estados
+// como el estado inicial de otro estado
+const [firstName, setFirstName] = useState('')
+const [lastName, setLastName] = useState('')
+const [fullName, setFullName] = useState(`${lastName}, ${firstName}`)
+// ✍️ Nota: cuando el valor a actualizar es generado apartir del estado actual
+// es mejor usar una funcion para definir el siguiente estado. Por ejemplo:
+// Cuando creamos un contador usamos el estado anterior para calcular el 
+// siguiente estado -> countador = countador + 1
+// Por lo que la forma correcta de definir el estado es mediante una función
+// de tal manera de que nos aseguremos que estamos usando el último estado.
+const [count, setCount] = useState(0)
+// No es seguro usar el estado fuera del metodo del metodo para actualizar el estado
+// si es que queremos calcular el nuevo estado basado en el estado actual.
+setCount(count + 1) ❌
+// ✨ Tip: Podemos pasar una funcion como parametro el cual recibe el estado actual.
+// Y por lo tanto podemos calcular el siguiente estado de forma segura.
+setCount(currentCount => currentCount + 1) ✔️
diff --git a/useEffect.js b/useEffect.js
@@ -29,7 +29,7 @@ useEffect(() => {
   // `componentDidMunt()` + `componentDidUpdate()`
   return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
 }, [])
-// Nota: la función anonima que le pasemos a useEffect no puede ser
+// ✍️ Nota: la función anonima que le pasemos a useEffect no puede ser
 // asíncrona, por lo que si deseamos ejecutar una función asíncrona
 // es necesario crear dicha función dentro y luego usarla como en el siguiente ejemplo.
 useEffect(() => {
@@ -39,8 +39,27 @@ useEffect(() => {
 
 // Cuando el hook `useEffect` tiene definida una lista de dependencias
 // significa que estará pendiente de los cambios que cualquiera de las
-// dependencias tenga, de tal manera que la mantendra sincronizada.
+// dependencias tenga de tal manera que la mantendra sincronizada.
 useEffect(() => {
   // `componentDidMunt()` + `componentDidUpdate()`
   return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
-}, [...dependencias])
+}, [...dependencias])
+// ✍️ Nota: Es importante declarar la lista de dependencias al definir el useEffect
+// y no usar declarar afuera y asignarle el valor al `useEffect` como en el
+// siguiente ejemplo:
+const dependencias = [primeraDependencia, segundaDependecia, terceraDepdendencia]; ❌
+useEffect(() => {}, dependencias) ❌
+// ✨ Tip: Podemos cargar información dinámicamente usando como dependencia el valor
+// de algun dato que necesitemos para cargar la información. Un ejemplo puede ser que
+// necesitemos cargar los datos del usuario según el identificador del usuario, como
+// haremos en el siguiente ejemplo:
+useEffect(() => {
+  const getDataAsync = async () => {
+    try {
+      const response = await fetch(`http://awesome.api/user/${userId}/`)
+      const data = response.json()
+    } catch(e) {
+      window.alert(`Error: Ha ocurrido un error al intentar cargar los datos del usuario: ${userId}`)
+    }
+  }
+}, [userId])
diff --git a/useCallback.js b/useCallback.js
@@ -0,0 +1 @@
+useCallback
diff --git a/useEffect.js b/useEffect.js
@@ -41,4 +41,6 @@ useEffect(() => {
 // significa que estará pendiente de los cambios que cualquiera de las
 // dependencias tenga, de tal manera que la mantendra sincronizada.
 useEffect(() => {
+  // `componentDidMunt()` + `componentDidUpdate()`
+  return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
 }, [...dependencias])
diff --git a/useMemo.js b/useMemo.js
@@ -0,0 +1 @@
+useMemo
diff --git a/useContext-and-Context-API.js b/useContext-and-Context-API.js
@@ -0,0 +1 @@
+useContext + Context API
diff --git a/useEffect.js b/useEffect.js
@@ -1,10 +1,44 @@
+// Hook: useEffect 
 useEffect(() => {
   // Ejecuta esto:
-  // 1. cuando el component se monta
-  // 2. cuando la `informacion` se actualiza
+  // 1. cuando el component se monta -> `componentDidMount()`
+  // 2. cuando la `informacion` se actualiza -> `componentDidUpdate()`
   return () => {
     // Ejecuta esto:
-    // 1. cuando la `informacion` se actualiza
-    // 2. cuando el componente se desmonta
+    // 1. cuando la `informacion` se actualiza -> `componentDidUpdate()`
+    // 2. cuando el componente se va a desmontar -> `componentWillUnmount()`
   }
-}, [informacion])
+}, [informacion])
+
+// Usos del useEffect
+
+// Cuando el hook `useEffect` no tiene definida una lista de dependencias
+// significa estara pendiente de todos los cambios que sufra el componente
+// internamente (a causa de alguna actualización en los estados que maneja
+// internamente) o externamente (a causa de alguna actualizacion en las 
+// propiedades que se le pasa al componente cuando es utilizado). 
+useEffect(() => {
+  // `componentDidMunt()` + `componentDidUpdate()`
+  return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
+})
+
+// Cuando el hook `useEffect` tiene definida una lista de dependencias
+// pero dicha lista es esta vacia, significa que solo estará pendiente
+// a que el componente sea montado.
+useEffect(() => {
+  // `componentDidMunt()` + `componentDidUpdate()`
+  return () => {} // `componentDidUpdate()` + `componentWilUnmount()`
+}, [])
+// Nota: la función anonima que le pasemos a useEffect no puede ser
+// asíncrona, por lo que si deseamos ejecutar una función asíncrona
+// es necesario crear dicha función dentro y luego usarla como en el siguiente ejemplo.
+useEffect(() => {
+  const getDataAsync = async () => {}
+  getDataAsync()
+}, [])
+
+// Cuando el hook `useEffect` tiene definida una lista de dependencias
+// significa que estará pendiente de los cambios que cualquiera de las
+// dependencias tenga, de tal manera que la mantendra sincronizada.
+useEffect(() => {
+}, [...dependencias])
diff --git a/useReducer.js b/useReducer.js
@@ -0,0 +1 @@
+useReducer
diff --git a/useRef.js b/useRef.js
@@ -0,0 +1 @@
+useRef
diff --git a/useState.js b/useState.js
@@ -0,0 +1 @@
+useState
diff --git a/useEffect.js b/useEffect.js
@@ -0,0 +1,10 @@
+useEffect(() => {
+  // Ejecuta esto:
+  // 1. cuando el component se monta
+  // 2. cuando la `informacion` se actualiza
+  return () => {
+    // Ejecuta esto:
+    // 1. cuando la `informacion` se actualiza
+    // 2. cuando el componente se desmonta
+  }
+}, [informacion])