Los Hooks de React te permiten usar el estado y otras funciones de React sin tener que crear un componente de clase de React. Usando ganchos, puede construir aplicaciones React totalmente operativas exclusivamente con componentes de funciones. No se requiere más class Example extends React.component {}.

Ganchos Básicos

Ganchos cotidianos para casos de uso cotidiano.

Hooks básicos de React
- useEffect
- useState => Este artículo
- useContext => Próximamente

useState

Documentación oficial para usoEstado

const [state, setState] = useState(initialState);

1. Estado inicial

Una matriz que contiene dos valores.

1. Estado más reciente
2. Función para actualizar el estado a nuevos valores

useStateacepta un valor inicial y devuelve dos valores: el estado más reciente y una función para actualizar el estado. Los valores se devuelven en forma de matriz y normalmente se leen mediante la sintaxis de desestructuración de matriz .

setStatees una función asíncrona, por lo que es crucial tener en cuenta que puede llevar tiempo completarla. A veces, un nuevo estado requiere que se calcule el estado anterior. El cálculo de un nuevo estado basado en un estado antiguo se puede lograr pasando una función al setStatemétodo proporcionado en el segundo [1]argumento (en la matriz de JavaScript) de la matriz devuelta. Es importante asegurarse de que las funciones useStatey useEffectse ejecuten siempre en el mismo orden. Si las funciones useStatey useEffectno se activan en el mismo orden, lo pasará muy mal (más información sobre cómo lograr el orden correcto a continuación). En cálculos precisos se devolverá cuando no se mantenga el orden de las funciones.

Ejemplos

Comprender useStatelos valores de retorno.

El siguiente código se puede expresar de varias maneras.

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

Cambio de osos a toros.

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

El siguiente código agregará 27 al estado anterior.

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

Comprender la inicialización perezosa de las variables de estado. Explicación oficial de React Docs.

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

Sitio web personal
LinkedIn
Instagram