React Hooks

Published in

CNK Tech

4 min readDec 9, 2022

Hi everyone, today I will tell about the most used React hooks. First of all, what does hooks mean? let’s look at this.

Hooks were added to React in 16.8 version. It allows you to use state and other React features without writing class. Hooks are the functions which hook into React state and lifecycle features from function components. It does not work inside classes.

Alright, what are the hooks rules? There are 3 rules for hooks:

Hooks can only be called inside React function components.
Hooks can only be called at the top level of a component.
Hooks cannot be conditional

Now that we have general information about React hooks, we can look at their types.

useState Hook
useEffect Hook
useRef Hook
useCallback Hook
useMemo Hook
useContext Hook
useReducer Hook

🪝UseState Hook

The useState hook allows you to create state variables in React function component. In this way, you access and update certain values in components over time.

When we create a state variable, we must provide it a default value.

Below is a simple example where you can update the color state.

It is defined in [ ] with a const prefix, the first value is the changed or retained value and access is provided by this value. The second value is the state function, the state value is changed with this function, usually starts with “set”. On the other side of the equation are the useState function and its first value.

You can update the state with functions that update it, in this example, I updated it with onClick.

🪝UseEffect Hook

The useEffect hook allows you perform side effects in your component. Some examples of side effects are, fetching data, directly update the DOM and timers.

Let’s use a timer as an example.

When I do this way it will running continuously but I want it to run 1 time so I need to second parameter for useEffect.

useEffect(() => {
  //Runs only on the first render
}, []);

Final version with correct spelling:

🪝UseRef Hook

Refs are special attribute that are available on all React components. They allow you to create a reference to given element/component when the component mounts.

useRef allows us to use React refs. They are helpful when we want to directly interact with an element, such as to clear its value or focus it, as with an input.

🪝UseCallback Hook

The useCallback hook returns a memoized callback function. Memoization is caching a value so that it does not need to be recalculated. This allows us to isolate resource intensive functions so that they will not automatically run on every render. The useCallback hook only runs when one of its dependencies update and this can improve performance.

Using this way it won’t be rendered again when it doesn’t change.

🪝UseMemo Hook

The useMemo hook returns a memoized value. UseMemo hook to memoize the expensiveCalculation function and the useMemo hook only runs when one of its dependencies update. This can improve performance.

useMemo returns a value from the computation, which is then stored in a variable.

🪝UseContext Hook

In React, there are multiple prop requirement problems to pass data from one parent to two or more levels, and this is called prop drilling.

Context is helpful for passing props down multiple levels of child components from a parent component and sharing state across your app component tree. The useContext hook removes the unusual-looking render props pattern that was required in consuming React Context before.

I will talk more about this hook in my next post.

🪝UseReducer Hook

The useReducer is a state management hook like useState. The difference is that useReducer allows custom state function. This function is also called reducer.

useReducer, more helpful for managing state across multiple components that may involve different operations or “actions”.

useReducer hook accepts two arguments: