📄 Table of Contents

Introduction:

  • Prior to React version 16.8.0, we have been using classes for creating a stateful component. Also, We were not able to use state in the functional components but now with the help of hooks, we can hook state, lifecycle methods and other class-based features into functional components.
  • React Hooks let us write pure functional components without ever using the class syntax.
  • you can use Hooks only with functional components.
  • Also, there’s no this.setState({}) function inside functional components.
  • React hooks make render props and HOCs almost obsolete and provide a nicer ergonomics for sharing logic. With React hooks you can reuse common pieces of logic between React components.
  • Hooks do NOT work in class components
    - Only call Hooks from React function components, not regular JavaScript functions
    - Hooks can be called from custom Hooks
    - Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.

➪ Hooks run each time component re-renders

➪ Use basic hooks as much as possible

React hooks let us :-

  • write pure functional components without ever using the class syntax => It has enabled to introduce state in a functional component. You know that the states cannot be used in functions. But with hooks, we can use states
  • React ships with a bunch of pre-defined hooks. The most important are useState and useEffect.

Why Hooks over traditional react life-cycles?

  1. No need to use class components to use state. There is no more need to write class components even if we want to use state inside React components. Before, if we had written a functional component and we wanted to use state in it, we had to change it to a class component. With Hooks, we can use state inside functional components.
  2. No Mounting and cleanup functions. You no longer have to think about when React mounts a component and what you should do in componentDidMount and remember to clean it up in componentWillUnmount. Hooks take care of all this stuff out of the box.

React HOOKS (v >= 16.8.0) :

useState is stateful (read more about useState). It only uses the initial state once, the first time it renders. After that it’s ignored. So it’s safe to pass a transient value, like a prop that might change or some other variable.

const [ i, seti] = useState(initialState);
  • Equivalent of initialState.
  • useState makes possible to use local state inside React components, without resorting to ES6 classes.

2. useEffect:

  • by default, useEffect() gets called after every render.
  • useEffect() can be called multiple times in same class.

UseEffect() is a combination of CDMount, CDUpdate, CDUnmount.

<all lie at the bottom-most of each phase i.e.s Mouting, Updating & Unmounting.>

  • useEffect() can be made to be called to be rendered only for the first time as in CDMount.
useEffect(
()=> {
console.log(“runs on first render only”}, [ ]
)
  • useEffect() can be made to be called only when some specific state changes & NOT always, by providing a second argument — an array of values.Think of them as the dependencies for that effect. If one of the dependencies has changed since the last time, the effect will run again. (It will also still run after the initial render).
useEffect(
()=> {
console.log(“runs only when age changes ”), [age]}
)

Passing no 2nd argument causes the useEffect to run every render. Then, when it runs, it fetches the data and updates the state. Then, once the state is updated, the component re-renders, which triggers the useEffect again. You can see the problem.

Notice how we put a function inside the callback. The function is named fetchData and does exactly as it’s named.

useEffect(() => {
async function fetchData() {
const res = await fetch("https://swapi.co/api/planets/4/");
res
.json()
.then(res => setPlanets(res))
.catch(err => setErrors(err));
}
fetchData();
});

If this looks more complicated, I assure you it’s not. Just like how we wrote a function inside componentDidMount — so do we in the useEffect Hook.

async function fetchData() {
const res = await fetch("https://swapi.co/api/planets/4/");
res
.json()
.then(res => setPlanets(res))
.catch(err => setErrors(err));
}
useEffect(() => {
fetchData();
});
  • When you return a function in useEffect this will get called when the component UNmounts.
useEffect(() => {
// This gets called after every render, by default
// (the first one, and every one after that)
console.log('render!');
// If you want to implement componentWillUnmount,
// return a function from here, and React will call
// it prior to unmounting.
return () => console.log('unmounting...');
})

3. useReducer: NOT actually redux, it does NOT have global state, you cannot use redux thunk with it.

An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)

const [ state, dispatch ] = useReducer(reducer, initialArg, init);

4. useSelector : replaces connect’s mapStateToProps.

5. useDispatch: replaces connect’s mapDispatchToProps.

6. useRef: Refs are used to access DOM or React elements rendered in the render function.

7. useContext: Context solves one of the React’s biggest problem, prop drilling, but doNOT follow Provider and Consumer concept.

Traditionally, we needed to explicitly keep passing on the “props” to even those components which do not even use it, only to make the data available to the hierarchy below. We were maintaining the overhead of constantly passing the “props” data throughout the entire Hierarchy.

Context APIs” to the Rescue…

Context API the hook way

8. useMemo: Equivalent of ShouldComponentUpdate in earlier versions.

In React, we don’t want to re-render a component even though the props are the same. So, we should memoize the respective component using the useMemo hook so that the component will re-render only when there is a change in the props.

9. usePrefetch: The usePrefetch hook can help you improve the loading time of the main app page by lazy loading other secondary components that don’t need to render on the first view. The goal is to reduce bundle size and make your application respond quicker.

For our example, let’s assume that we have a page with some information and a button that opens a modal. Before we press the button, the modal shouldn’t render and we don’t need it yet. But if we import it at the beginning of the main component, we will need more time to download its JavaScript code because it will be included in the original bundle. What we want to do is lazy load the modal component to split its code from the main component and prefetch it when the main component has rendered the first time.

10. useGeo: This hook gets the current position and the updated value whenever the user moves.

11. useInterval

12. useTimer

❌. When NOT to use React Hooks

  1. Don’t call hooks inside the loop, condition or nested function.

Instead, always use Hooks at the top level of your React function. This rule, you ensure that Hooks are called in the same order each time a component renders.

3. Call hooks from REACT function, not the REGULAR function.

So you can Call Hooks from React functional components or from the custom hooks as we discussed early. By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.

Writing Your Own Custom React Hooks

  • Separate Logic from User Interface
  • Create Re-usable Logical Block
  • Provide Cleaner and Scalable Code
  • React Custom Hooks can use Other inBuilt Hooks
  • “use” appended to function name as a convention to use Custom Hooks
Using Simple Custom Hook

The above-created custom hook does not add any lot of value to the application, but it represents the simple custom re-usable component storing some data and returning the data from it.

we can use other inbuilt react hooks (to say, useState, useEffect) from within custom hooks. What it offers:-

  • Business logic has been extracted away from the View Component
  • Reduces the complexity of View Component “ApplicationComponent”
  • Custom Hook created is re-usable

more @ https://medium.com/@mayank.gupta.6.88/creating-custom-react-hooks-9d4f382359bb

➪ Using “useState” Hook in React Custom Hooks

use the recommended convention of naming custom hooks — the name should start with the “use” keyword. We are also importing React hooks that we’ll use later on in our implementation. We could also import constants, other functions, other custom hooks, etc.

Let’s extract your components logic into reusable functions.

Okay, But what are they?

These are normal javascript functions which can use other hooks inside of it and contain a common stateful logic that can be reused within multiple components. These functions are prefixed with the word use.

Let’s say you have 2 functions (components) which implement some common logic. You can create a third function with this common logic and implement it in the other two functions. After all, hooks are just functions.

useDocumentTitle hook

Say we have to build a component which on every click increases the count and updates the title of the page with thecount value using hooks. Not a big deal, right.

Counter Component

It works well. I always prefer creating the component first and then extracting out the stateful logic from that function(component) and then putting it into another function(custom hook) and then just doing some refactoring so the component works well with our hook.

Let’s take the useEffect section out of the component and put it inside our new function useDocumentTitle.

useDocumentTitle hook

Simple, but not useful? Where can this be useful?

To show unread messages or notifications on slack or facebook. We can use this useDocumentTitle hook in a place where we get the message and then we call this hook with a count of unread messages and title.

using redux methodology
using Hooks methodology

➪ how to use Redux with React Hooks.

React Redux now offers useSelector and useDispatch Hooks that can be used instead of connect.

useSelector is an alternative to connect’s mapStateToProps. You pass it a function that takes the Redux store state and returns the state you need.

useDispatch replaces connect’s mapDispatchToProps. All it does is return your store’s dispatch method so you can manually dispatch actions.

let’s have a look at a real-time example in which we will convert a React component that uses connect into one that uses Hooks.

Using connect:

Now, with the new React Redux Hooks instead of connect:

Another benefit of not using the higher-order component is that you no longer get this “Virtual DOM chaining”:

Now you have the basics of Hooks and how to use them with Redux, time to get your hands dirty. 😘

References:

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store