Hooks
-
Características
-
Def.: Permiten "enganchar" componentes funcionales con otras características de React o
desarrolladas por nosotros mismos
-
Se deben llamar dentro de los propios componentes funcionales (NO crear archivo tipo utils.js
para
meterlos ahí)
-
Comienzan por la palabra
use
-
Se ejecutan dos veces (probarlo con console.logs) debido al StrictMode de React en index.js (< React.StrictMode>< /React.StrictMode>) al crear un proyecto de React, el cual sirve para identificar posibles efectos secundarios o situaciones de las que no hayamos sido conscientes (en general, no solo para los hooks)
-
useState()
Características
-
Definimos una propiedad del estado del componente funcional y la función que puede modificar su
valor
-
Dicha función es asíncrona, por lo que no es seguro utilizar justo después el valor modificado, ya que puede que aún no se haya actualizado
-
useState() como argumento tiene el valor inicial de la propiedad definida
-
Ej.
const [clicks, setClicks] = useState(0)
-
useEffect()
Características
-
Efectos que se producirán cuando el componente se monte
-
Primer argumento: callback que se ejecutará cuando el hook se invoque
-
Segundo argumento: array de dependencias
-
Según su contenido, dependerá cuántas veces se ejecutará el efecto
-
Ej.
useEffect(() => {
console.log("efecto ligado a click local");
}, [clicks]) // Si se produce un cambio en clicks (propiedad declarada con el hook useState), se ejecuta el efecto
-
Si esta vacío, el efecto se ejecutará solo una vez (cuando el componente se monte)
-
Si NO hay array de dependencia, el efecto se ejecutará tanto tras el montaje del componente como cuando cambie cualquier dependencia (propiedad)
-
useNavigate()
-
Para navegar a otras rutas
-
const navigate = useNavigate()
JSX --> button onClick={ () => navigate("/lo-que-sea")}>Ir a lo-que-sea // Mejor utilizar el componente Link to="/example" de react-router-dom
-
useContext()
-
Def.: Para poder utilizar información no local desde los componentes funcionales
-
Cómo se usa
-
Crear componente Contexto que contenga
import React from 'react';
export const GeoContext = React.createContext();
-
Lo importamos en el App.js y:
-
Creamos un useState con la variable o propiedad globalClicks y la función de modificación setGlobalClicks
const [globalClicks, setGlobalClicks] = useState(0);
-
Creamos una función que tenga como callback la función de modificación del punto anterior:
let updateClicks = () => setGlobalClicks(globalClicks + 1);
-
En la renderización de componentes añadimos:
< GeoContext.Provider value="{{ globalClicks, updateClicks }}">
< GeometricRouter />
< /GeoContext.Provider>
-
Lo llamamos en el compo que queramos mediante
const {globalClicks, updateClicks} = useContext(GeoContext);
-
useParams()
-
En la definición de las rutas en el Router, si queremos que un path param (los que van justo después de /, no confundir con los query params, que van después de ?) sea dinámico lo definimos así:
/cuadrado/:id
-
Para utilizar ese param en un componente, creamos mediante desestructuración un objeto con ese mismo nombre:
const { id } = useParams();
-
Ya podemos utilizarlo en la parte de JSX y tendrá el mismo valor que el introducido en la url sustituyendo el :id
return < div >Cuadrado {id}< /div>
-
useLocation()
-
Para los query params (también se puede utilizar para los path params)
-
Cómo obtenerlos:
-
const location = useLocation();
(hacer un console.log de location ayuda a ver la info que podemos usar)
const queryParams = new URLSearchParams(location.search);
const paramValue = queryParams.get("param"); // Ese "param" es el nombre que le quiera dar al query param (/ej?param=hola), devuelve: hola
-
Custom hook (creado por nosotros)
-
Función que puede utilizar JS puro u otros hooks
-
No devuelve jsx, ya que en ese caso sería un componente funcional