Forem: Sebastián Maciel

useState | Entrevistas de React

Sebastián Maciel — Wed, 04 Oct 2023 00:38:39 +0000

Lo importante sobre los hooks de react para tener en cuenta en una entrevista, es potencialmente poder saber y responder tres puntos esenciales:

Qué son en simples palabras
Qué problemas resuelven
Un ejemplo simple de implementación

En esta ocasión, nos toca el manejo de estado.

useState

Qué es?

Este hook es básicamente una forma de declarar una variable que para React va a tener un significado especial:

Cada vez que cambiemos el valor de esta variable, React va a detectar esa actualización y disparar un rerender del componente en el que se encuentra. O sea, volver a crear este componente, volver a pintarlo en el navegador.

Qué problema resuelve?

La idea es tener una manera de que React reaccione ante un cambio que realicemos en una variable. Veamos un ejemplo, sin React:

// Inicializamos una variable que vamos a usar de contador:
let counter = 0

// Actualizamos el valor de esa variable de manera típica:
counter++

Con el ejemplo anterior, efectivamente vamos a aumentar el contador. Pero React no va a estar al tanto de ese cambio. Por lo que si usamos esa variable para mostrar algo en el navegador, el cambio no se va a reflejar.

Ahora, usemos useState:

const [ counter, setCounter ] = useState(0)

Para entender lo que pasa, tenemos que tener bien sabidos dos conceptos de JavaScript:

Funciones (Documentación).
Desestructuración de Arrays (Documentación).

Estos dos conceptos nos dejan entender que useState es básicamente una función que React nos brinda que tiene dos características simples:

Es una función que puede tomar como parámetro, una de dos cosas:
- Un valor que inicializa la variable counter (lo más común)
- Una función de inicialización (menos común, más sobre esto luego)
Y a su vez, nos devuelve un array con dos elementos:
- La variable con el valor que nos interesa.
- Una función que sirve para actualizar esa variable.

La forma más simple de usarla es:

setCounter(1)

Esto va a lograr que React vuelva a crear el componente donde estemos usando este hook, y a su vez actualizar el valor de la variable counter a 1.

Veamos un ejemplo de componente real:

import { useState } from "react";

const MyCounter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <>
      <button onClick={() => setCounter(counter + 1)}>Add</button>
      <p>{counter}</p>
    </>
  );
};

Este componente simple cumple con dos tareas:

Mostrar un botón que al hacer click ejecuta el setCounter:
- setCounter recibe el valor actual de counter y lo incrementa.
- React entiende que hubo un cambio en la UI y dispara un rerender.
Un paragraph que muestra el valor de la variable counter.

Casos especiales

Lo interesante de leer las librerías es que vas descubriendo cosas como por ejemplo, que la función setCounter acepta un valor para actualizar counter, pero también se le puede pasar una función.

De esta función podemos recibir un parámetro que es realmente el último valor de counter. Realmente, al inicio de nuestro camino en React es probable que no nos haga mucha diferencia utilizar un método u otro:

<button onClick={() => setCounter(counter + 1)}>
  Add
</button>

// O también

<button onClick={() => setCounter((currentCounter) => currentCounter + 1)}>
  Add
</button>

Solamente cuando nos encontramos utilizando este setCounter en ocasiones o en conjunto con operaciones que lleven un cierto tiempo en completarse, como acciones asíncronas, es cuando necesitamos realmente el último valor actualizado de counter. Son esos detalles que nos vuelven locos y que terminamos entendiendo de una manera u otra. No hay que pretender entender esto en los primeros momentos del proceso de aprendizaje.

La regla es: recordar que nuestro valor está tardando en actualizarse, o que se está actualizando mal debido a que no estamos tomando el último valor realmente disponible.

Función inicializadora

En otros momentos, necesitamos inicializar el primer estado de nuestro useState con algún valor que quizás lleve un tiempo en resolver, como una llamada a un endpoint, algún cálculo matemático o incluso leer algo de localStorage. Algo simple pero que lleve un tiempo.

Es muy poco probable tener que usar esto, realmente. Pero useState también acepta una función que sirve para inicializar solamente una vez y al inicio del renderizado del componente, el valor de nuestro estado. Sería algo así:

const processedUserInfo = getUserComplexInfo()

const [userInfo, setUserInfo] = useState(() => processedUserInfo)

Lo que va a hacer esto es: llenar nuestro userInfo con la información calculada o procesada una sola vez. Pagamos el precio de la tardanza la primera vez y listo. Luego podemos actualizar y rerenderizar el componente todas las veces siguientes, sin tener que volver a procesar la info de getUserComplexInfo.

Normalmente es raro utilizar esto, pero existe por una razón. Como regla es bueno medir la performance de tu componente. Realmente si requiere esta manera de inicializar el estado entonces considerar usarlo. Pero optimizar por el mero hecho de optimizar, puede salir más caro de lo que parece.

Por último: si tu componente tiene muchos useState, es muy probable que necesites usar un useReducer para simplificar el manejo de estado de tu componente. Así vas a ganar practicidad en la lectura del código y evitar la repetición y malas prácticas.

Si te gustó este contenido y estás iniciando o llevás un tiempo en React y te gustaría que escriba sobre algún otro tema en particular, dejame tu comentario.

Voy a seguir atacando estos temas básicos sobre React de todas maneras.

Gracias por el tiempo!

Seba.

Intro a Custom Hooks

Sebastián Maciel — Tue, 28 Feb 2023 19:11:04 +0000

Como principiantes en React, hay mucho que abarcar y aprender. Un tema importante es Custom Hooks. Que si bien usamos hooks todo el tiempo, poder crear los nuestros nos va a dar un punto más a la hora de aplicar buenas prácticas y limpiar nuestro código.

Ese enfoque vamos a tomar, refactorizar nuestro código creando hooks personalizados.

Empecemos por las bases

Todo en react básicamente son funciones, la clave está en cómo se escriben. React las reconoce bajo esta norma:

// Componentes | Deben empezar con mayúscula
const MyComponent = (props) => { ...

// Funciones normales | Siempre empiezan con minúsculas
const inputHandler = (e) => { ...

// Hooks | Siempre empiezan con use
const [value, setValue] = useState(); //

Regla importantísima

El problema que nos surge siempre, es que cuando queremos usar hooks de react en nuestras funciones normales, la regla de hooks nos va a advertir que los hooks solo pueden usarse dentro de componentes de react o de otros hooks.

Y para qué usaríamos un custom hook?

Vamos a limpiar este componente simple:

import React, { useState } from 'react';

const ModeSwitcher = () => { // Componente
  const [darkMode, setDarkMode] = useState(false); // Hook
  const [readMode, setReadMode] = useState(false);

  const toggleDarkMode = () => { // Función
    setDarkMode(!darkMode);
  };

  const toggleReadMode = () => {
    setReadMode(!readMode);
  };

  return (
    <div>
      <button onClick={toggleDarkMode}>
        {darkMode ? 'Light Mode' : 'Dark Mode'}
      </button>

      <button onClick={toggleReadMode}>
        {readMode ? 'Read Mode' : 'Normal Mode'}
      </button>
    </div>
  );
};

En este código simple, tenemos dos botones ficticios que simulan un modo "activado/desactivado" para un estado en la aplicación.

Esto es simple y entendible en cómo funciona. Pero si quisiéramos agregar más estados, pecaríamos con la repetición de los useState y las funciones de toggle.

Como refactorización simple, nos vamos a llevar a un hook la lógica de activación y desactivación de un solo switch:

const useSwitch = () => { // empieza con 'use'
  const [switchMode, setSwitchMode] = useState(false);

  const toggleSwitchMode = () => {
    setSwitchMode(!switchMode);
  }

  return [switchMode, toggleSwitchMode];
}

Al ser una función normal, pero empezarla con use, le estamos diciendo a react que es un hook, y por lo tanto nos va a permitir usar otro hook en su interior (useState en este caso).

Esta función realmente puede convivir dentro del mismo componente, pero lo usual es importarlo desde otro archivo, a este hook le haríamos la siguiente modificación en ese caso:

// useSwitch.js
import React, { useState } from 'react';

export default function useSwitch() { //...

Usando el hook

Ahora, simplemente vamos a reemplazar el código interno que teníamos de nuestra app para utilizar nuestro hook, incluso en los dos casos a la vez:

import useSwitch from './useSwitch';

const ModeSwitcher = () => {
  const [darkMode, toggleDarkMode] = useSwitch(); // Nuestro hook
  const [readMode, toggleReadMode] = useSwitch();

  return (
    <div>
      <button onClick={toggleDarkMode}>
        {darkMode ? 'Light Mode' : 'Dark Mode'}
      </button>

      <button onClick={toggleReadMode}>
        {readMode ? 'Read Mode' : 'Normal Mode'}
      </button>
    </div>
  );
}

El detalle interesante es que podemos darle el nombre que queramos a cada state y su función para hacer toogle para diferenciarlos:

const [active, switchActive] = useSwitch(); // Por ej.

Para entender lo anterior, leé sobre desestructuración de arrays.

En resumen

Por un lado, notar que eliminamos el useState de nuestro componente principal. Lo cual es un buen refactor, ya que si tenés hooks típicos de react en tus componentes (useState o useEffect), es una buena señal de que podés llevártelos a un custom hook para limpiar el código y refactorizar de manera más profesional tu código.

Si te gustó este post y te gustaría que haga otros custom hooks para profundizar o poder usar otros ejemplo, dejámelo en los comentarios y exploramos.

Gracias!

Javascript concepts you must know as a beginner #1

Sebastián Maciel — Tue, 19 Jul 2022 12:58:01 +0000

Here we are going to learn some Javascript concepts that I think all Juniors must know before thinking about upgrading their skills and learning more complex stuff, if you dominate this ones, you'll sure ready to go on.

Index

Var, let and const
Values VS References (primitive and objects)
Conditionals

Var, let and const

Simply put, these are ways to define the behavior and the scope of a variable. Var was the usual way to declare a variable, let and const came after and they are the standard way nowadays.

The problem with var is that you can access that variable almost inside every part of your app, and sometimes that lack of limits is unwanted, could take you to rare situations to debug. So it's not recommended.

The let keyword is used to declare a variable that can change its content anytime, i.e.:

let name = 'Will';
console.log(name) // 'Will'
name = 'Mike'
console.log(name) // 'Mike'

The const keyword is more strict in that sense, you can't change the value of this one, except some cases like with an array and a plain object that may seem that you can add things to this arrays and new properties to the objects and it shouldn't happen, it's not really what's happening. const is to prevent further assignments but in some cases you are allowed to change the contents of it.

const price = 100
// trying to assign another value to it
price = 200
// Will throw: Uncaught TypeError: invalid assignment to const 'price'

This error will not happen to the contents of objects like arrays and plain objects, you can change their content. Understanding why and how to prevent this to happen is beyond the scope if this post.

Last things good to know about:

The let and const variables has a scope.
They can be declared with the same name inside another scope.

Values VS References

If you know that there are primitives and object types, you have to know that primitives are passed by value while objects are passed by reference.

By value

This means that when a primitive has a value, and if you assign that value to another primitive, they will have copies of each other, totally disconnected, remember the 'disconnected' thing. When I mean 'a copy' I'm saying that in memory, where all our data is saved, will exist different places with the information, even if it's the same.

Even if we try to make like a copy of one, it will be unaffected by the changes made to otherNumber:

let one = 1;
let otherNumber = one;

// Sum some quantity to the otherNumber variable:
otherNumber = otherNumber + 10;

// Logging the contents:
console.log(one); // 1
console.log(otherNumber); // 11

By reference

We will see now that non primitives like objects and arrays is the exact opposite in a way. When you assign values to an object, make 'a copy' and modify the original object, you will see the changes in the new copy:

let person = { name: 'Dustin' };
let newPerson = person;
// Changing the first object:
person.pet = 'Demogorgon';
// Logging the newPerson object:
console.log(newPerson); // { name: 'Dustin', pet: 'Demogorgon'}

Variables in Javascript hold 'values' that are references on memory for everything that is a non primitive. It's useful to re-read the last sentence, and if it doesn't make sense yet, I promise it will do if you dig into it by yourself.

Tip: You have to remember this differences when comparing things, even if you compare two exact equal arrays with the same content, know that Javascript will not compare by default their values but their reference values, and they will be different. For comparing the values of arrays and objects, I encourage you to investigate further.

Conditionals

It's useful to have a way to make decisions in certain scenarios. Conditionals are ways to create reactions to some logical comparison that evaluate to true or false values.

The simple if statement:

// Ask the user his/her age and save it to the 'age' variable
let age = prompt('How old are you?')

// Make a conditional check:
if (age > 30) { 
    alert('You can be a part of the group!');
}

This means that if the variable age is greater than the number 30, this condition evaluates to true, so it executes the block of code contained in curly braces. If not, the entire block is ignored.

Tip: It's nice to understand that every value in Javascript has a falsy and truthy values, and it could be used in your favor:

let zero = 0;
let one = 1;

if (zero) {... // '0' is falsy

if (one) {... // '1' resolves to truthy

What if we want more conditions to be evaluated? We can do it with an else clause:

if (year === '2020') {
    alert('That was two years from now');
} else {
    alert('The year value is not 2020');
}

In the above example, we assume that if the value assigned to year is '2020', the first block of code will be executed. In other cases, the second code block is like a fallback action for the failed first comparison.

More cases to check?

if (age < 18) {
    alert('You are not allowed to drive');
} else if (age <= 21) {
    alert('You may get a license to drive');
} else if (age <= 30 ) {
    alert('You can drive and enter to a bar');
} else {
    alert('You are more that thirty years old')
}

Another nice way to check things is with the ternary expression:

let isAllowedMessage = age > 21 ? 'You are allowed' : 'You need to be 21 or older'

if age > 21 evaluates to true then the part after the '?' is returned. If it's false then the part after the colon will be returned. A nice way to make a simple conditional check. Be careful about this simplifications, seek for code readability always.

When if else chain may get out of control with a lot of conditions, a switch statement could be use for better readability, go and learn about different ways to check conditions, you will be using them everyday at work.

Thanks a lot for reading so far, this things will help you becoming a more robust developer. Always try to understand the basics of anything you want to learn. Strong fundamentals facilitates complex concepts to be understood easily.

If you want to recommend this post to a friend or coworker that you think could help, I'll be happy to help!

Let me know what you think in the comments!

Dwight Schrute's Intro to Programming

Sebastián Maciel — Mon, 18 Jul 2022 22:20:04 +0000

With comprehensive visual code examples attached to this document

This tutorial is a beginners approach to programming through the Javascript language.

Question: Do I think that even you can start to programming in Javascript?

Fact: If I can teach Mose what to do, sure you can do it to a computer browser.

I welcome you to this short introduction to the holy practices of Javascript programming my young padawan from now on. The force had brought you here, or maybe you are a forced coworked who I insisted to visit my post. Anyway, at least one force is present.

Enough of you, let's talk about what do you need to understand to begin to work with javascript:

A text editor or an IDE:
- Sublime Text is a text editor
- Visual Studio Code is an IDE
- Go and learn how to install one of them.
You will be doing this go and forth to learn little things all the time, with no explanations how, so get used to it.
Keep reading this post, that's it.

The very basics data types are:

Strings: "Dunder Miflin, this is Pam" or "1234", it's a string too if it's surrounded by backticks, single or double quotes.
Numbers: 0, -1, 0.3 - This ones are just the digits.
Booleans: true or false, you will learn that almost everything can be reduced to this, it will be useful to remember this.
Null: This means 'nothing', 'empty' of 'value unknown'.
Undefined: You will learn about what this means sooner that later young apprentice. Let's treat it as a null.

Other types you must understand:

Objects: We are no taking about a primitive type like the past ones. The difference is that the last ones can only contain one single value. Pathetic. Objects are like gods, they can store collections of data, you will love and hate treating with them sometimes. Know them very well before they know you and stab you from the back.
Symbols: You should not worry for this ones yet. Learn objects very well is my personal recommendation.

It's time for the special detective of the data types: the typeoffunction. Some time from now, or if you are an adventurer and already know how to open the chrome developers tool to use the Javascript console and test this next thing, go on.

We will tell Javascript to run the typeof function and pass to it the value we want to know which type javascript guess:

// This entire line is a comment fi it begins with double forward slashes
// Telling Javascript to tell us the typeof of several values:

typeof undefined // "undefined"

typeof 0 // "number"

typeof true // "boolean"

typeof "Jim" // "string"

typeof Symbol("Michael") // "symbol"

typeof null // "object", yes, no time to get chatty here.

Learning by doing

My personal strategy is to start doing before start learning what you are doing, is the way mother's nature treat us.

I'm gonna let you read some code and then explain to you what is happening:

if (belt === "black") {
    alert("Must be Dwight");
}

This is simple if you read it like: lets check a condition here, check if the value of the belt is equal to "black", if so, you will have to bring an alert with the message "Must be Dwight".

It's called a condition because it does some stuff based if a certain situation turns out to be trueof false. There's even a way to check a lot of different situtations at once:

if (coworkerName === 'Jim') {
    denyAccess();
} if else (coworkerName === 'Michael') {
    allowAccess();
} else {
    denyAccess()
}

I guess now that you might understand what is happening. Check first if the name of the worker trying to access the building is "Jim" and execute a function that denies the access. But if it's "Michael", the allow the access executing the function.

Yes, there is a last else 'case' for when the coworkers name is different to those two ones. Could be "Toby" or someone else. Of course in that case I will want to deny access to him, or anyone else.

Question: Can we try to address some cases without making a lots of else if and making a mess with the curly braces?

True: Use a switch case statement:

switch (coworkerName) {
    case 'Dwight':
        allowAccess();
        break;
    case 'Jim':
        denyAccess();
        break;
    case 'Pam':
    case 'Michael':
        allowAccess();
        break;
    default:
        denyAccess();
}

Hear my words little programming lamb: The value of coworkerName will be tested in every case. And will execute everything that is below the colons until another case. We tell it to break so the checking doesn't go any further.

Final words:

Here I presented you a little taste about programming, this is, telling the computer how to behave. You must know that there are a lot of things that you can the computer to do and react to certain scenarios.

If you want to see more of this tutorials, comment below and I will keep posting this stuff on the internet for you.

Greetings!