React Hooks for the first time — simple as possible

Photo by Lynda Hinton on Unsplash

The Story is starting while we decided to push some react projects into our product, for some features.
Until version 16.8 we used to create classes while creating components with states, we used the different lifecycles hooks and function components for pure things that don’t require any stages or lifecycles with no states.
In React 16.8, a new feature was added and let the developers another strategy to work with.
No more classes are needed, from this version writing function components with hooks that replace the lifecycle methods is the new kid in town.

What is the motivation behind it?
There are some problems which react tried to solve.
Before version 16.8, when using react classes the separation of concern was a little bit violated, why? because when components were built, the logic was splitted or gathered inside three main functions:

• componentDidMount
• componentDidUpdate
• componentWillUnmount

with hooks, we can actually use a couple of functions that are doing exactly one action without mixing things.
for example:
Using useEffect a couple of times, one for fetching data, other for set loader, etc…

Moreover, a lot of developers found it hard to understand the context of ‘this’ inside the class, so by creating the hooks, no more class component was needed (still can use it).

Another reason, the ability to share logic between components.
When using classes, it is hard to share logic and reuse lifecycle functions.
With the help of hooks, we are now able to do so.
for example:
using a custom hook for fetching data from the server, like user info.

Let's move to some basic examples 😎

useState:

Allow saving function state even when the function is recreated itself.

Each click on the button would cause the state to change and the function ‘Counter’ to recreate everything except the state which keeps the prev value.

UseEffect:

Logic to perform when the component is initialized, updated, or destroyed.
There are two parameters:

• Function- would be called.
• Dependency list- the parameter would reflect the trigger for the function to run, for what parameter/s to listen.

UseEffect supporting three different states:

• W/O dependency list - act like componentDidMount + componentDidUpdate (trigger the function for every change and for first rendering).
• With empty dependency list - act like componentDidMount (trigger only when component first initialized).
• Return function inside the callback - act like componentWillUnmount (trigger when the component is destroyed).

What is the benefit?
This hook performs side effects, triggering something when something is changed.
For example, when rendering a component and want to fetch some data before the draw, or when destroying a component that holding a reference to an object that we want to clear, like interval reference.
There are some cases when we want to trigger a function when something was changed such as function reference, variable, state, or props.
There is no restriction on the number of hooks that we can create and we also can create a custom hook for reusing in a couple of components.

useCallback:

Cache/memoize function until dependencies list is changing.
This hook is getting two parameters:

• Function- would be cached.
• Dependency list- tells the hook for what inputs to listen for changes to know when to recreate a new instance.

In the example above, there are two hooks, one is dependent on a counter variable and each time that variable would be changed, the function will be recreated.
The other, making some logic and would be cached on the first rendering.

What is the benefit?
Each time new props are pushed or the state is changed, everything would be recreated.
By marking functions with useCallback hooks React knows to use the function that was cached, unless one of the dependencies was changed.

useMemo:

Cache result of the function call- using for expensive calculations to avoid rerendering.
This hook is getting two parameters:

• Function- the result would be memoized.
• Dependency list- tells the hook for what inputs to listen for changes to know when to recreate a new instance.

Note: There is also React.memo which is used as a higher-order component
It can be used when the component renders the same result given the same props, and only check for props changes.

useRef:

Gives us two great abilities:

• Grab native element from the DOM — the ability to access and manipulate the DOM.
• Mutable variable — This allows us to use it as a variable that keeps its value during the component lifetime.

In the example above, the component is holding a ref variable to one of the DOM elements, input.

What is the benefit?
We can manipulate or access data on the DOM and can use it to store mutable variable which is not influenced or trigger the component re-rendering when the value is change.

However, useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

useContext:

Share data between components without passing props.

In the example above, we set the context for the UI state with the ‘displayLoader’ prop.
We also set for what level we want to share the context properties,
in the example we set it on our entry point on the top level.
Every component inside the provider, could use the context and gain the relevant props from it without the need for props drilling.

What is the benefit?
This hook is very useful, it allows us to avoid props drilling and avoid overuse state management like redux.
There are some cases that we want to consume properties that could be changed on one of our branches/layers on the component tree.
One way we can achieve it is by sending props from the parent component to the desired child component and when something is changed to go all the way back — props drilling.
With the help of useContext, we are actually set some properties that we could consume at any level without the need for drilling.
Moreover, it allows us in some cases to leave the state management aside.

Conclusion:

React hooks is a very fresh update that makes our development much more clearer, easier and maintainable.

I gave a general brief to react hooks with examples, but there are more hooks to cover!
Hope u have enjoyed 😎