useState

Basically, we use "useState" to tell react to re-render the component in case the associated variable changes its state.

Counter: 0

useState using Custom Hook

In general, we create custom hooks when the logic involved with the state of a variable is very noisy within the component itself, so we create a js file where we center the logic and the react's own hooks to leave a cleaner component.

Counter: 16

useEffect

The "useEffect" hook is used to trigger secondary effects. This hook receives 2 parameters, the first is a callback that will be executed depending on the second parameter of the function, which consists of a dependency array where we specify that if x variable (entered in the dependency array) changes, then the " useEffect" executes the callback.

Simple Form

useForm - Custom Hook

This is a custom hook to maintain the state of a form.

Simple Form

useFetch - Custom Hook

This is a custom hook where we have an Valorant API's call.

In this case, I've implemented a custom hook that allows me to make an http call and save the "loading" status while the request is being made to know when I can render the component, and while the data isn't arriving, then display something indicating that it's loading.

Examples

Gekko

Fade

Breach

Deadlock

Tejo

Raze

Chamber

KAY/O

Skye

Cypher

Sova

Killjoy

Harbor

Vyse

Viper

Phoenix

Astra

Brimstone

Iso

Clove

Neon

Yoru

Waylay

Sage

Reyna

Omen

Jett

useRef

It is identical to "useState" but in this case we tell react that if the value of the variable associated with useRef changes, then the component should NOT be rendered. It is generally used to reference html.

FocusScreen

useFetch - Custom Hook

This is a custom hook where we have an Valorant API's call.

It is identical to "useEffect" but in this case it is fired once the rendering is complete.

Examples

Gekko

Fade

Breach

Deadlock

Tejo

Raze

Chamber

KAY/O

Skye

Cypher

Sova

Killjoy

Harbor

Vyse

Viper

Phoenix

Astra

Brimstone

Iso

Clove

Neon

Yoru

Waylay

Sage

Reyna

Omen

Jett

memo - React function

The "memo" function allows us to memorize the state of a component, so that the renderings of a parent component do not make the child component re-render if it is not necessary given its logic. This is especially useful and is recommended to be implemented only when components have very expensive logic that may be affecting performance when rendering or processing data.

Example with Counter

Counter: 1

useMem - React Hook

the "useMem" hook has the same goal as the "memo" function. The difference is that now it does not memorize a component, we want to memorize a value that is obtained by executing some logic inside the component that, if it is the same, does not recalculate its value because it was already calculated before.

Example with Counter

Counter: 10

10 iterations done

useCallBack - React Hook

the "useCallBack" hook is another hook used to memorize, but in this case it memorizes functions so that when a component is re-rendered, they do not change their memory address, influencing the child components that receive said function as property. It is generally used together with child components that receive this function as a property, and for its proper functioning, the child component must be accompanied by the "memo" function.

Another use case is when a hook such as "useEffect" is used and within it x function is called, which is also a dependency of "useEffect" itself, so without the "useCallBack" this would be running in an infinite loop.

Example with Counter

Counter: 10

useReducer - React Hook

The "useReducer" hook is similar to "useState", but in this case it is used when the state changes in many ways and you want to centralize this in a function where the logic is separated by actions.

In this case, we implemented 3 events: "add to do", mark as "done to do" and "remove to do" within "useReducer"

ToDos: 0

Pendientes: 0

useContext - React Hook

The "useContext" hook is used to save the state or actions that are required at different levels of a component tree, thus avoiding having to pass all the arguments through the props.

In this example, we implement the router to see the case of different pages.

Main

{
   "user": {}
}