Understanding, React Hook’s ( React 16.8 + ) (Part 1)

Sometimes, the best implementation could be small functions. Not libraries, classes or frameworks. Just a small function.
React hooks are introduced in react conf, 2018 and available in the latest addition to react in version 16.8.0. In this article, we’re going to explore react hooks that enable users to use stateful components features in functional components.
like, state management, side effect handling, props drilling etc..
There are multiple Hooks available in React, in part one we will explore these.
1- useState.
2- useEffect
3- useContext
Why we need hooks in functional components?
- To reuse the stateful logic
- To minimize the bundle size
- To minimize the bundle size
- Reduce the complexity and readability
- Perform common task on components using custom hooks
- Avoid HOC or Mixins
- Performance boost for the functional component
1- useState
useState() is a hook that allows us to create stateful functional components
before hooks, functional components had no state. Now, we can do this using useState() hook.
let's see how to use this.
const [count, setCounter] = useState(10);
useState takes 1 argument as initial state returns an array with 2 elements, and we’re using ES6 destructuring to assign any names to them. The first element is the current value of the state, and the second element is a function. just call this function next time with a new value, and the state will be set and the component will re-render.
2- useEffect
Class-based components manage side effects (like Async API Calls) using life cycle methods, like componentDidMount(). The useEffect() function allows you to perform side effects in functional components.by default, useEffects hook run after every render, but, we can choose to fire it only when certain values have changed, this can be achieved by passing an array of variables as a second optional parameter.
in some cases you may need to run effect only once, to achieve this you can pass an empty array knowing that an empty array never change, it will always be empty, so the effect will never run on each render.
componentDidMount Using useEffect
useEffect(() => {
// perform a task
}, []);componentDidUpdate Using useEffect
useEffect(() => {
fetchData(props.value);
}, [props.value]); // this could only be called when props.value changedcomponentWillUnmount Using useEffect
useEffect can either return nothing or return a function. if we want to implement componentWillUnmount like function then we can return a function from useEffect that will be called two times.
1- After the first render (the previous effect is cleaned up before executing the next effect)
2- Before component unmounts from the DOM (cleanup everything)
useEffect(() => {
console.log(‘Hello..’);
return () => {
console.log(‘Cleaning Resources’)
}
}, [props.value]);//output fisrt render —
// Hello
//ouput after first render —
// Hello
// Cleaning Resources
//ouput after unmount -
// Cleaning Resources
useContext
In case if you haven’t heard of React’s Context API, it’s a way to pass data deeply throughout your app without having to manually pass props down through multiple levels
In order to understand useContext and its application, let's look into the nonfunctional way to use the Context API.
The Generic Way
The useContect Way
Some Rules
Hooks are JavaScript functions, but they have two additional rules:
- Only call Hooks at the top level. Don’t try to call anywhere else.
- Only call Hooks from React function components. use life cycle methods in stateful components.
- Hooks should be called in the order they declared
That’s All :)

For more information and update please go through the official docs
