By the end of this guide, you’ll understand the core hooks in Flutter, how to use them effectively, how to create your own custom hooks, and best practices for using them in real-world projects.

Table of Contents

• Prerequisites

• Why Flutter Hooks?

• Common Flutter Hooks

  • How to Use the useState Hook in Flutter

  • How to Use the useAnimationController Hook in Flutter

  • How to Use the useEffect Hook in Flutter

  • How to Use the useMemoized Hook in Flutter

  • How to Use the useRef Hook in Flutter

  • How to Use the useCallback Hook in Flutter

  • How to Use the useContext Hook in Flutter

  • How to Use the useTextEditingController Hook in Flutter

• How to Create a Custom Hook in Flutter

• Advanced Hooks

• Demonstration: Counter Example with Hooks

• Best Practices

• Hooks vs Stateful Widgets

• Additional Resources

Prerequisites

Before diving into Flutter hooks, make sure you have the following:

• Flutter SDK: Installed and configured (Flutter 3.x or higher recommended). Verify with:

    flutter --version
  

• Dart SDK: Comes with Flutter, ensure it’s up to date.

• IDE: Visual Studio Code, Android Studio, or IntelliJ with Flutter extensions.

• Basic Flutter knowledge: Familiarity with widgets, StatelessWidget, StatefulWidget, and state management basics.

• Package dependency: The flutter_hooks package installed by adding the following to pubspec.yaml:

    dependencies:
      flutter_hooks: ^0.21.3+1
  

  Then run:

    flutter pub get
  

Why Flutter Hooks?

Here are some of the benefits of using Flutter hooks:

1. Improved Readability and Maintainability
   Hooks reduce boilerplate by embedding state and side effects logic directly in the widget’s build method. This makes the code cleaner and easier to understand.

2. Reusability
   Hooks can be abstracted into custom hooks. For example, you could extract complex logic (like data fetching) into a reusable function.

3. Granular State Management
   Instead of managing a single State object for an entire widget, hooks let you manage small, independent pieces of state. This is especially useful for complex UIs.

4. Simplified Side Effects
   Hooks such as useEffect provide an elegant way to handle lifecycle-related tasks like data fetching, listeners, or subscriptions.

Common Flutter Hooks

Let’s go through the most common hooks, with explanations line by line.

How to Use the useState Hook in Flutter

The simplest and most used hook. It allows you to declare and manage state inside a HookWidget.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class CounterButton extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useState<int>(0); // Step 1: create state with initial value 0

    return ElevatedButton(
      onPressed: () => counter.value++, // Step 2: update state using counter.value
      child: Text('Count: ${counter.value}'), // Step 3: read the state
    );
  }
}

Explanation

• useState<int>(0) initializes state with a value of 0.

• counter.value reads the state.

• Updating counter.value triggers a rebuild, just like setState.

How to Use the useAnimationController Hook in Flutter

Handles animations while managing the controller’s lifecycle automatically.

class AnimatedBox extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(
      duration: const Duration(seconds: 1), // Step 1: define animation duration
    );

    return FadeTransition(
      opacity: controller, // Step 2: bind controller to animation
      child: Container(width: 100, height: 100, color: Colors.blue),
    );
  }
}

Explanation

• The hook creates an AnimationController that lasts 1 second.

• The controller is automatically disposed of when the widget is removed.

• You can trigger animations with controller.forward() or controller.reverse().

How to Use the useEffect Hook in Flutter

Handles side effects such as fetching data or setting up listeners.

class DataWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    useEffect(() {
      fetchData(); // Step 1: perform side effect
      return () => cancelSubscription(); // Step 2: optional cleanup
    }, []); // Step 3: dependency list

    return Text('Data is loading...');
  }
}

Explanation

• The callback runs when the widget builds.

• The cleanup function runs when the widget is disposed or dependencies change.

• The empty dependency list [] means it only runs once.

How to Use the useMemoized Hook in Flutter

Caches expensive computations and reuses results unless dependencies change.

final calculatedValue = useMemoized(() => calculateExpensiveValue(), []);

Explanation

• calculateExpensiveValue() runs once and caches the result.

• With dependencies provided, the function reruns only when they change.

How to Use the useRef Hook in Flutter

Keeps a mutable reference across rebuilds.

final textController = useRef(TextEditingController());

TextFormField(
  controller: textController.value,
  decoration: InputDecoration(labelText: 'Username'),
);

Explanation

• useRef stores an object without triggering rebuilds.

• Useful for controllers, focus nodes, or mutable values that shouldn’t reset.

How to Use the useCallback Hook in Flutter

Memoizes a callback to prevent unnecessary widget rebuilds.

final onPressed = useCallback(() => print('Pressed'), []);

Explanation

• Without useCallback, functions may be recreated on each rebuild.

• Memoized callbacks improve performance when passed to widgets like ListView.

How to Use the useContext Hook in Flutter

Provides direct access to BuildContext values like themes or providers.

final theme = useContext();

How to Use the useTextEditingController Hook in Flutter

A shorthand for creating text controllers.

final usernameController = useTextEditingController();

TextFormField(
  controller: usernameController,
  decoration: InputDecoration(labelText: 'Username'),
);

Explanation:

1. What is useTextEditingController()?

final usernameController = useTextEditingController();

• Normally in Flutter, if you want to manage text input, you create a TextEditingController.

• With a normal StatefulWidget, you’d do something like:

late TextEditingController usernameController;

@override
void initState() {
  super.initState();
  usernameController = TextEditingController();
}

@override
void dispose() {
  usernameController.dispose();
  super.dispose();
}

• But with Flutter Hooks, you can replace all that boilerplate with:

    final usernameController = useTextEditingController();
  

• This hook automatically:

  • Creates the controller.

  • Keeps it alive for as long as the widget exists.

  • Disposes of it when the widget is destroyed.
    So you don’t need to manage lifecycle manually anymore.

2. Using the controller in a TextFormField

TextFormField(
  controller: usernameController,
  decoration: InputDecoration(labelText: 'Username'),
);

• This TextFormField is linked to the usernameController.

• Whatever the user types in the input field will be stored in usernameController.text.

• You can read or modify it at any time:

    print(usernameController.text);  // get typed text
    usernameController.text = "Anthony"; // set default value
  

3. How it works together

• useTextEditingController() provides a ready-to-use TextEditingController without the hassle of init/dispose.

• The TextFormField uses this controller to manage user input.

• This is the hooks way of handling text fields.

Summary

• useTextEditingController() → Hook to create & dispose a TextEditingController automatically.

• TextFormField(controller: ...) → Uses that controller to manage and access the text typed in the field.

• Cleaner and safer than manually handling init/dispose in a StatefulWidget.

How to Create a Custom Hook in Flutter

You can encapsulate logic in reusable hooks.

Future<String> useFetchData() {
  final data = useState<String>('Loading...');

  useEffect(() {
    Future.microtask(() async {
      data.value = await fetchDataFromApi();
    });
    return null;
  }, []);

  return data.value;
}

Explanation:

1. Function signature

Future<String> useFetchData()

At first glance, it looks like this function should return a Future<String>.
But in reality, the function does not return a Future, it returns data.value, which is a String.

So the correct signature should really be:

String useFetchData()

Because what you’re returning is the current state of the data, not a Future.

2. State setup

final data = useState<String>('Loading...');

• This creates a state variable data with an initial value of "Loading...".

• data.value holds the actual string value.

• Updating data.value will cause the widget to rebuild.

3. Effect hook

useEffect(() {
  Future.microtask(() async {
    data.value = await fetchDataFromApi();
  });
  return null;
}, []);

• useEffect runs once (because the dependency list [] is empty).

• Inside it, a Future.microtask schedules an async task to fetch data.

• Once the API call finishes, data.value is updated with the response from fetchDataFromApi().

• Updating data.value triggers a rebuild, so the UI will now show the new data instead of "Loading...".

4. Return value

return data.value;

• This returns the current state value ('Loading...' initially, later replaced by the fetched data).

• On first build, you’ll get "Loading...".

• After the API call finishes, a rebuild happens and now useFetchData() will return the fetched string.

5. How it works in practice

Imagine this widget code:

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final result = useFetchData();

    return Text(result); 
  }
}

Step 1 → UI shows "Loading...".
Step 2 → API is called in the background.
Step 3 → When the API response arrives, data.value updates.
Step 4 → Widget rebuilds and now Text(result) displays the fetched data.

Summary

• useState holds the data (Loading... → fetched result).

• useEffect runs once to trigger the async fetch.

• When the fetch finishes, it updates state → widget rebuilds → UI shows new value.

• The function should return a String, not Future<String>.

Advanced Hooks

• useListenable: Works with ValueNotifier or ChangeNotifier.

• useDebounced: Debounces input, useful for search fields.

• usePreviousState (from community libraries): Keeps track of the previous value.

Demonstration: Counter Example with Hooks

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class Counter extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final count = useState<int>(0); // state variable initialized to 0

    useEffect(() {
      print('Count updated: ${count.value}'); // log whenever count changes
      return null; // no cleanup needed
    }, [count.value]); // dependency: re-run when count changes

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('You clicked ${count.value} times', style: TextStyle(fontSize: 24)),
        ElevatedButton(
          onPressed: () => count.value++, // increment state
          child: Text('Increment'),
        ),
      ],
    );
  }
}

Explanation:

This code is using the flutter_hooks package to manage state and lifecycle in a functional style instead of the usual StatefulWidget + setState. Let’s break it down step by step:

1. Class definition

class Counter extends HookWidget {
  @override
  Widget build(BuildContext context) {
    ...
  }
}

• Counter extends HookWidget instead of StatelessWidget or StatefulWidget.

• HookWidget allows you to use hooks (like useState, useEffect) directly inside the build method to manage state and side effects.

2. State with useState

final count = useState<int>(0);

• useState is a hook that creates a piece of state.

• Here, it initializes count with 0.

• count is not just an int, but a ValueNotifier<int> (meaning you can read count.value and update it by assigning to count.value).

So initially:
count.value = 0.

3. Effect with useEffect

useEffect(() {
  print('Count updated: ${count.value}');
  return null;
}, [count.value]);

• useEffect is used to perform side effects whenever dependencies change.

• In this case, it runs whenever count.value changes.

• It prints the updated value to the console each time the counter changes.

• The second argument [count.value] is the dependency list (like React Hooks). If count.value changes, this effect runs again.

4. UI

return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('You clicked ${count.value} times', style: TextStyle(fontSize: 24)),
    ElevatedButton(
      onPressed: () => count.value++, // increment state
      child: Text('Increment'),
    ),
  ],
);

• A Column displays two widgets:

  1. A Text widget showing the number of times the button has been clicked.

  2. An ElevatedButton that increments the counter when pressed (count.value++).

Because count is a ValueNotifier, updating count.value automatically triggers a rebuild of the widget.

5. How it works in practice

1. The app shows: "You clicked 0 times" and a button "Increment".

2. When you tap the button:

   • count.value increases by 1.

   • The widget rebuilds, showing the updated count.

   • useEffect runs, printing Count updated: X to the console.

Summary:
This code is a counter app built using Flutter Hooks.

• useState manages the counter state.

• useEffect listens for changes in the counter and runs a side effect (printing to console).

• The UI displays the count and a button to increment it.

Best Practices

• Use dependency lists correctly with useEffect and useMemoized.

• Don’t over-engineer: Sometimes StatefulWidget is simpler.

• Test thoroughly, especially when side effects are involved.

• Extract reusable logic into custom hooks to keep widgets focused.

Hooks vs Stateful Widgets

What are Stateful Widgets?

A StatefulWidget is a widget that can change over time because it holds mutable state.

• It’s made up of two classes:

  1. StatefulWidget → the immutable configuration.

  2. State<T> → the mutable state and logic.

How they work

• When something in the state changes, you call setState().

• This tells Flutter to rebuild the widget tree with the updated state.

Example:

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('You clicked $count times'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: Text('Increment'),
        ),
      ],
    );
  }
}

Key points

• Good for simple UI state (like counters, toggles, form fields).

• Flutter manages the widget’s lifecycle (init, rebuild, dispose).

• You handle initialization in initState and cleanup in dispose.

In short:
Stateful widgets are the classic way to manage state in Flutter. They’re straightforward for beginners and great for simple use cases. For more complex or reusable state logic, hooks (or state management libraries like BLoC, Riverpod) can be cleaner and more scalable.

Summary:

• Hooks: Cleaner, modular, reusable, great for advanced state handling.

• Stateful Widgets: Easier for beginners and fine for simple state.

Additional Resources

• flutter_hooks package on pub.dev

One of the interesting things about the Hook features is that they let you use React without classes. This, in turn, helps simplify your codebase and helps you write cleaner and more intuitive code.

In this article, you will learn how to make use of the common Hooks in your project.

React Hooks Benefits

Let's go over some of the reasons why you might want to use Hooks in your project:

• Easy to use and understand: With Hooks, you can write more straightforward code. These Hook commands can only be written inside a functional component.

• Reusable code: Hooks allow you to reuse a particular logic used in one component across multiple other components.

• Better optimization performance: Hooks offer a more efficient approach to utilizing React functionalities like state and lifecycle functions, resulting in improved performance as compared to class components in some situations.

Different Types of React Hooks

The React Hook features are of different types, ranging from the useState, useEffect, useRef, useReducer, and so on.

React Hook Rules

There are a few important rules when it comes to the React Hook features that should be strictly followed. Let's go over them in the following sections.

Hooks should be called inside a React function

Hooks should not be used inside a class component – they can and should only be called inside the React function.

This first rule essentially specifies that a Hook component should not be found in a class component, but in a functional component.

Here is the wrong way of implementing the Hook feature:

import React, { Component } from 'react';
import React, {useState} from react;

class App extends Component {
 const [count, setCount] = useState(0);

  render() {
    return (
      <div>
        <h1>Hello, I am a Class Component!</h1>
      </div>
    );
  }
}

export default App;

And here is the correct way of implementing the Hook feature:

import React, { useState } from 'react';

function App() {
  const [userName, setUsername] = useState('');

  };

  return ( Your JSX code goes in here.....);
};

export default App;

The code example above shows a proper way of using a Hook feature.

If you use a Hook feature in a class component, just like in the first example, your code will raise an error. Therefore, you can only implement a Hook inside a function component.

Hooks can only be called at the top level of a component

You can only implement/call a React Hook at the top level of a component before any other code.

Using the code from the previous section as an example, you can see that immediately after function App ().

The next thing that comes is the Hook command – in that example we used the useState Hook. That is what the second rule is all about.

Hooks cannot be used in a conditional statement

We have different types of conditional statements/rendering ranging from if, else, and so on.

The above rule means that conditionals cannot be applied directly to Hooks. This is the case because Hooks are called in the same order on every render of a functional component.

You can conditionally run Hooks within a functional component, but for this to work, this condition must be determined by top-level logic and should not be nested within any other blocks or components.

The reason for this is because Hooks need to be invoked at the highest level of the component, rather than under conditions, loops, or nested functions.

Here is an example:

import React, { useState, useEffect } from 'react';

function ConditionalEffectComponent() {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    if (isMounted) {
      // Perform some effect when the component is mounted
      console.log('Component mounted');
    }
  }, [isMounted]); // Dependency array ensures effect runs when isMounted changes

  return (
    <div>
      <button onClick={() => setIsMounted(!isMounted)}>
        {isMounted ? 'Unmount' : 'Mount'}
      </button>
    </div>
  );
}

export default ConditionalEffectComponent;

From the example above, the useEffect hook is executed conditionally dependent on the value of the isMounted state variable.

Clicking the button causes the value of isMounted to alternate, either activating or deactivating the effect depending on the updated value.

This is deemed appropriate because the Hook is invoked at the highest level of the component and its condition is determined by the overarching logic within the component.

How to Use the useState Hook

The React useState Hook enables you to have state variables in functional components.

To make use of the state Hook, you must first import it into your project by using the import command.

The way useState works is that it gives us two variables. The first variable is known as the value of the state, and the second variable is a function used to update the state.

Here is an example of how to go about this:

import './App.css'
import React, { useState } from 'react';

function App() { 

    const [count, setCount] = useState(0); 

return ( 
    <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}> Click me
        </button>
    </div>
    ); 
}

export default App;

From the code example above, you can see that the state Hook was used in a functional component and not a class component.

count and setCount are the two variables of the state Hook, where count is the current value of the state and setCount is used to update the value of the state. Therefore, whenever the button is clicked, setCount will update the value of the count.

How useState Hook works

How to Use the useEffect Hook

The useEffect hook in React is like a handy tool for functional components. It helps manage tasks that aren't directly related to showing stuff on the screen, like fetching data from the internet, retrieving data from API endpoints, or setting up timers. It can be used to update components even after they've been shown, making your app more dynamic.

Here's a basic example of how useEffect is used to fetch data from an API endpoint:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData(); // Call the fetchData function when the component mounts or updates

    // Cleanup function (optional) to handle unsubscriptions or resource cleanup
    return () => {
      // Cleanup logic here, if needed
    };
  }, []); // Empty dependency array means the effect runs only once after the initial render

  return (
    <div>
      {/* Render the fetched data */}
      {data && (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default MyComponent;

In the code example above, MyComponent is a functional component which utilizes React hooks, specifically useState and useEffect, to handle state management and execute side effects. The useState hook is used to initialize a state variable called data. This variable will store the data retrieved from an API endpoint.

The useEffect hook is used to request data from the API endpoint once the component initially renders. Within the useEffect, an asynchronous function fetchData is defined to fetch JSON data from the specified API endpoint using the fetch API.

If the data fetching is successful, the returned JSON data is saved in the data state variable using the setData function supplied by the useState hook.

The useEffect hook also optionally returns a cleaning function, which is currently empty but can be used for any necessary cleanup logic.

In the component's JSX, the fetched data is conditionally rendered. If the data is not null, a list <ul> is produced using items extracted from the data array using map.

Finally, the MyComponent function is exported as the default export from the module, allowing it to be imported and utilized in other sections.

Conclusion

As a developer, React Hooks are a very useful and powerful tool for functional components that make your work easy.

I believe that at this point you now know what a React Hook is and how to use the most popular ones.

Thanks for reading, and happy coding!

If you are a React developer, you likely appreciate its component-based architecture, uni-directional data binding, huge community support, and the React team's passion for bringing features in front of developers.

If you are just getting started with React or a beginner at it, that's great – there's a complete React.js roadmap published here on the freeCodeCamp you can check out. And I think you'll find the library a lot easier to learn if you have a solid grip on basic JavaScript foundations.

Irrespective of where you stand with React, the real fun is in building things with it, don't you agree? So I thought of building a simple inventory list to explain a few powerful concepts like complex state management with useReducer.

And while we're doing that, we'll also create a mock API server using JSON Server, we'll use axios to call the API, and finally we'll use the useReducer hook to manage state.

Sounds interesting? Let's do it. If you would also like to check out the video version of this project, here it is: 😊

Table of Contents

• Project Setup with React and TailwindCSS
• How to Setup a Server with JSON Server
• How to Set Up and Use Axios
• How to Use the useReducer Hook from React
• How to Create Actions
• How to Create an Inventory Reducer
• How to Build the Inventory List Component
• How to Use Axios to Fetch Data and Dispatch it to the Reducer
• Let's Complete the JSX Part
• How to Use the Inventory List in the App Component
• Wrapping Up

Project Setup with React and TailwindCSS

Before we do anything else, let's get the project set up. Also, you can follow along with the source code as you read through.

To build this app, we will use React with Vite and TailwindCSS. You can set up these tools by following a few steps from the Vite and TailwindCSS documentation.

But, why not use something that provides everything built together? This will save you time for future React projects as you can use the same infrastructure to create a React projects every time.

Head over to this repository and click on the Use this template button as indicated in the image below. It will help you create a brand new repository out of a template repository with Vite, React, and TailwindCSS configured.

Create a React Project Repository with TailwindCSS and Vite from an Existing Template

Now provide a suitable name to your repository (let's call it inventory-list in this article) along with a description. You may chose to keep the repository private if you wish to, otherwise go ahead and create the repository by clicking on the button at the bottom.

Provide the Details of the New Repository

That's it. You have a repository with all the basic ingredients to get started. Now, go to the command prompt/terminal and clone the newly created repository:

git clone <YOUR NEWLY CREATED REPOSITORY URL>

Change directories to the project directory and install the project dependencies using the following commands:

## Change to the project directory
cd inventory-list

## Install dependencies

## Using NPM
npm install

## Using Yarn
yarn install

## Using PNPM
pnpm install

After the dependencies are installed successfully, execute the following command to run the project on a local server:

## Run the project locally

## Using NPM
npm run dev

## Using Yarn
yarn dev

## Using PNPM
pnpm dev

Now the project should be running locally and should be accessible on the default URL, http://localhost:5173. You can access the URL on yor browser and import the project source code into your favourite code editor (I use VS Code). We are all set to start the coding.

How to Setup a Server with JSON Server

JSON Server is the go-to option when you want to work with fake/mock APIs to serve data of your choice. It is easy to set up and customize to your use case.

Let's set up the JSON Server for our project. The first thing is to install it.

Open a terminal at the root of the project folder and type the following command to install JSON Server:

## Using NPM
npm install json-server

## Using Yarn
yarn add json-server

## Using PNPM
pnpm install json-server

JSON Server uses JSON files as the data sources to perform HTTP operations like GET/POST/PUT/PATCH/DELETE. Create a server/database directory under the src/ directory. Now create a file called data.json under the src/server/database/ with the following content:

{
  "edibles": [
    {
      "id": 1,
      "picture": "🍌",
      "name": "Banana",
      "price": 32,
      "quantity": 200,
      "type": "fruits"
    },
    {
      "id": 2,
      "picture": "🍓",
      "name": "Strawberry",
      "price": 52,
      "quantity": 100,
      "type": "fruits"
    },
    {
      "id": 3,
      "picture": "🍗",
      "name": "Checken",
      "price": 110,
      "quantity": 190,
      "type": "foods",
      "sub-type": "Non-Veg"
    },
    {
      "id": 4,
      "picture": "🥬",
      "name": "Lettuce",
      "price": 12,
      "quantity": 50,
      "type": "Vegetables"
    },
    {
      "id": 5,
      "picture": "🍅",
      "name": "Tomato",
      "price": 31,
      "quantity": 157,
      "type": "Vegetables"
    },
    {
      "id": 6,
      "picture": "🥩",
      "name": "Mutton",
      "price": 325,
      "quantity": 90,
      "type": "Non-Veg"
    },
    {
      "id": 7,
      "picture": "🥕",
      "name": "Carrot",
      "price": 42,
      "quantity": 190,
      "type": "Vegetables"
    }
  ]
}

The data.json file contains an array of edible items. Each of the items in the array has properties like picture, name, price, quantity, and type to show in the inventory list.

The last thing left is to add a script into the package.json file so that we can start the JSON Server easily every time. Open the package.json file and add this line inside the scripts object like this:

"start-server": "json-server --watch ./src/server/database/data.json"

Next, go to the terminal and use the following command to start the JSON Server to serve the API:

## Using NPM
npm run start-server

## Using Yarn
yarn start-server

## Using PNPM
pnpm run start-server

You should see a message like this in your terminal:

The Output

It indicates that the JSON Server is running locally on localhost:3000 and there is an API endpoint called edibles serves the data. Now you can access the URL http://localhost:3000/edibles from your browser to see the data (fetched by a GET method call):

The API Output

Great! Now we have the /edibles API endpoint ready to consume into the React component.

How to Set Up and Use Axios

Axios is an HTTP client that helps us make promise-based asynchronous calls from the browser and Node.js environment. It has a number of useful features that make it one of the most used libraries for asynchronous request-response.

Note that we could have used the fetch Web API from JavaScript instead of Axios in this project. The only reason for using Axios here is to introduce it progressively. In the future articles, you'll learn its usages in handling JWT tokens from a React application. Stay tuned!

Open the terminal at the root of the project folder and use the following command to install Axios:

## Using NPM
npm install axios

## Using Yarn
yarn add axios

## Using PNPM
pnpm install axios

That's it. We will use Axios in a bit after laying out the basic components needed for the inventory list.

How to Use the useReducer Hook from React

React is a user interface library that supports component-based architecture at the core. A component is a single entity that's supposed to perform one task well. Multiple components come together to compose the final user interface.

Often, a component will have its own private data. We call these the states of a component. The value of a state drives the behaviour and appearance of a component. When state changes, the component re-renders to keep itself up-to-date with the latest state value.

The traditional way of handling state in React is with the useState hook. It works great as long as your state changes are trivial. As the state change logic becomes more complex and if you need to manage multiple scenarios around it, useState may make things clumsy. This is where you should think about using the useReducer hook.

useReducer is a standard hook from the React library. It accepts two primary parameters:

• initState: the initial state value
• reducer: a JavaScript function that holds the state change logic based on an action (or trigger).

The hook returns the following:

• A state: the current state value.
• A dispatch function: a function that tells the respective reducer what to do next, and what data to act on.

The image below explains each of the entities of the useReducer hook. If you want to learn about this hook in a greater depth, feel free to check this out.

The Anatomy of the useReducer Hook

How to Create Actions

The reducer function is the heart of the useReducer hook. It performs all the necessary logic to keep your application state updated and valid.

But how would the reducer function be aware of its task? Who would tell the reducer function what to do and what kind of data to work on? Here comes actions, an object that contains all the details for the reducer.

We define actions with types that indicate the stages a state change will occur in the reducer function. The same action object may also carry the application data(at times we call it payload) to pass to the reducer function when a component performs a dispatch.

We will now get started by creating some actions. We will define the types here. As our reducer needs to manage the inventory state on a data fetch, data fetch success, and data fetch error, we'll be defining actions for each of those.

Create a directory called actions/ under the src/ directory. Now create a file called index.js under the src/actions/ directory with the following content:

const FETCH_ACTIONS = {
  PROGRESS: 'progress',
  SUCCESS: 'success',
  ERROR: 'error',
}

export { FETCH_ACTIONS };

We have defined three actions, PROGRESS, SUCCESS, and ERROR. Next, let's create the reducer.

How to Create an Inventory Reducer

We need a reducer where we will keep all the state change logic. The same reducer will be passed to the useReducer hook later to get the current state value and dispatch the function to the component.

Create a directory called reducers/ under the src/. Now, create a file called inventoryReducers.js under the src/reducers/ directory.

Our reducer will need the actions because it has to work on state changes based on the actions. So, let's import the actions into the inventoryReducers.js file:

import { FETCH_ACTIONS } from "../actions"

You can define an initial state in the reducer file. The useReducer hook needs a reducer and an initial state to give us the current state value, remember? Let's define an initial state.

We need to show a list of inventory items after getting a successful API response. While we are fetching the list of items by making an API call, we need to manage a loading data state.

In case there is any problem in fetching data, we need to report the error using the error state. So we can create an initial state with all these values as object properties.

Now, create an initialState variable with the following state object value assigned to it:

const initialState = {
  items: [],
  loading: false,
  error: null,
}

Next, let's create the reducer function. Create a function called inventoryReducer with the following code snippet:

const inventoryReducer = (state, action) => {

  switch (action.type) {
    case FETCH_ACTIONS.PROGRESS: {
      return {
        ...state,
        loading: true,
      }
    }

    case FETCH_ACTIONS.SUCCESS: {
      return {
        ...state,
        loading: false,
        items: action.data,
      }
    }

    case FETCH_ACTIONS.ERROR: {
      return {
        ...state,
        loading: false,
        error: action.error,
      }
    }

    default: {
      return state;
    }      
  }

}

Let's understand the above code snippet. The inventoryReducer function takes two arguments, state and action. The reducer function works on the state based on the action type. For example,

• When it is a PROGRESS action, we want the loading value to be true.
• For a SUCCESS action, we want to populate the items with the data received from the API response along with making the loading value as false.
• For an ERROR action, we'll provide a value to the error property of the state.

In any of the cases above, we do not mutate the state directly. Rather, we create a clone (a new reference of it using the ... operator) of the state and then update its properties accordingly. Finally, we return the updated state for each of the actions. If the passed actions do not match any of the given types, we return back the state as it is.

Last, export the inventoryReducer function and the initialState object:

export {inventoryReducer, initialState};

Here is the complete code from the inventoryReducers.js file:

import { FETCH_ACTIONS } from "../actions"

const initialState = {
  items: [],
  loading: false,
  error: null,
}

const inventoryReducer = (state, action) => {

  switch (action.type) {
    case FETCH_ACTIONS.PROGRESS: {
      return {
        ...state,
        loading: true,
      }
    }

    case FETCH_ACTIONS.SUCCESS: {
      return {
        ...state,
        loading: false,
        items: action.data,
      }
    }

    case FETCH_ACTIONS.ERROR: {
      return {
        ...state,
        loading: false,
        error: action.error,
      }
    }

    default: {
      return state;
    } 
  }

}

export {inventoryReducer, initialState};

How to Build the Inventory List Component

We will now create the inventory list component where we will use the reducer we created above.

Create a directory called components/ under the src/ directory. Now, create a file called InventoryList.jsx under the stc/components/ directory.

First import the required things like:

• The useReducer hook where we will use the inventory reducer.
• The useEffect hook to handle the async call with Axios.
• The inventory reducer and the initial state we created a few minutes back.
• The actions, as we need them to dispatch.
• The axios for making async calls.

import { useReducer, useEffect } from "react";

import { inventoryReducer, initialState } from "../reducers/inventoryReducer";

import { FETCH_ACTIONS } from "../actions";

import axios from "axios";

Now, create a function to define the component:

const InventoryList = () => {

  const [state, dispatch] = useReducer(inventoryReducer, initialState);

  const { items, loading, error} = state;

  return(
    <div className="flex flex-col m-8 w-2/5">

    </div>
  );
};

Here,

• We have used the useReducer hook. We passed the inventoryReducer and the initialState to it as arguments to get the current state value and the dispatch function.
• As we know the state object has the items, loading, and error as properties, we destructure them into our component. We will use them shortly.
• The component returns an empty div that we will change as we proceed.

Finally export the component as a default export like this:

export default InventoryList;

How to Use Axios to Fetch Data and Dispatch it to the Reducer

It's data fetching time! Data fetching by making an asynchronous call is a side effect you need to handle in your component. Copy and paste the useEffect code block inside the InventoryList function.

// -- The code above as it is

const InventoryList = () => {

  // --- The code above as it is


  useEffect(() => {
    dispatch({type: FETCH_ACTIONS.PROGRESS});

    const getItems = async () => {
      try{
        let response = await axios.get("http://localhost:3000/edibles");
        if (response.status === 200) {
          dispatch({type: FETCH_ACTIONS.SUCCESS, data: response.data});
        }
      } catch(err){
        console.error(err);
        dispatch({type: FETCH_ACTIONS.ERROR, error: err.message})
      }
    }

    getItems();

  }, []);

  // --- The JSX return statement below as it is

Let's understand the code flow:

• At the start of the useEffect callback, we dispatched a PROGRESS action. It invokes the reducer function with progress action type to turn the loading property value to true. We can use the loading property value in the JSX later to show a loading indicator.
• Then we use Axios to make an asynchronous call using the API URL. On receiving the response, we check if it's a success, and in that case we dispatch a SUCCESS action along with the items data(remember, payload?) from response. This time the dispatcher will invoke the reducer with the success action to change the items and loading properties accordingly.
• If there is an error, we dispatch an error action with the error message to update the state with the error information in the reducer.

Each time we dispatch an action and update the state, we also get back the latest state value into our component. It's time to use the state value in the JSX to render the inventory item list.

Let's Complete the JSX Part

The JSX part is fairly simple:

// -- The code above as it is

const InventoryList = () => {

  // -- The code above as it is

  return (
    <div className="flex flex-col m-8 w-2/5">
      {
        loading ? (
          <p>Loading...</p>
        ) : error ? (
          <p>{error}</p>
        ) : (
          <ul className="flex flex-col">
            <h2 className="text-3xl my-4">Item List</h2>
            {
              items.map((item) => (
                <li
                  className="flex flex-col p-2 my-2 bg-gray-200 border rounded-md" 
                  key={item.id}>
                  <p className='my-2 text-xl'>
                    <strong>{item.name}</strong> {' '} {item.picture} of type <strong>{item.type}</strong>
                    {' '} costs <strong>{item.price}</strong> INR/KG.
                  </p>
                  <p className='mb-2 text-lg'>
                    Available in Stock: <strong>{item.quantity}</strong>
                  </p>

                </li>
              ))
            }

          </ul>
        )
      }

    </div>
  )
}

export default InventoryList;

Here's what's going on in the code:

• We show a loading... message if the loading property of the state is true.
• We show the error message in case there's an error.
• In neither of the cases, we iterate through the inventory items using the map function. Each of the items in the items array has information like picture, name, price, and more. We show this information in a meaningful way.

Here is the complete code of the InventoryList component:

import { useReducer, useEffect } from "react";
import { inventoryReducer, initialState } from "../reducers/inventoryReducer";
import { FETCH_ACTIONS } from "../actions";

import axios from "axios";

const InventoryList = () => {

  const [state, dispatch] = useReducer(inventoryReducer, initialState);

  const { items, loading, error} = state;

  console.log(items, loading, error);

  useEffect(() => {
    dispatch({type: FETCH_ACTIONS.PROGRESS});

    const getItems = async () => {
      try{
        let response = await axios.get("http://localhost:3000/edibles");
        if (response.status === 200) {
          dispatch({type: FETCH_ACTIONS.SUCCESS, data: response.data});
        }
      } catch(err){
        console.error(err);
        dispatch({type: FETCH_ACTIONS.ERROR, error: err.message})
      }
    }

    getItems();

  }, []);


  return (
    <div className="flex flex-col m-8 w-2/5">
      {
        loading ? (
          <p>Loading...</p>
        ) : error ? (
          <p>{error}</p>
        ) : (
          <ul className="flex flex-col">
            <h2 className="text-3xl my-4">Item List</h2>
            {
              items.map((item) => (
                <li
                  className="flex flex-col p-2 my-2 bg-gray-200 border rounded-md" 
                  key={item.id}>
                  <p className='my-2 text-xl'>
                    <strong>{item.name}</strong> {' '} {item.picture} of type <strong>{item.type}</strong>
                    {' '} costs <strong>{item.price}</strong> INR/KG.
                  </p>
                  <p className='mb-2 text-lg'>
                    Available in Stock: <strong>{item.quantity}</strong>
                  </p>

                </li>
              ))
            }

          </ul>
        )
      }

    </div>
  )
}

export default InventoryList

How to Use the Inventory List in the App Component

Now we have to let the App component know about the InventoryList component so that we can render it. Open the App.jsx file and replace its content with the following code snippet:

import InventoryList from "./components/InventoryList"

function App() {

  return (
    <>
      <InventoryList />
    </>
  )
}

export default App

That's it. Make sure your application server is running. Now, access the app on your browser using the following URL http://localhost:5173/.

The Final Output - Inventory List

Wrapping Up

I hope you enjoyed building this project and learning more about React. Here is the source code on my GitHub. Please feel free to extend the project by adding features like:

• Adding an item to the inventory
• Editing an item from the inventory
• Deleting an item from the inventory

Hint: You need to create actions for each of these and enhance the reducer function to write state update logic to support these features. I hope you give it a try and if you do so, let me know (my contacts are mentioned below).

That's all for now. I also publish meaningful posts on my GreenRoots Blog, and I think you'll find them helpful, too.

Let's connect.

• I am an educator on my YouTube channel, tapaScript. Please SUBSCRIBE to the channel if you want to learn JavaScript, ReactJS, Next.js, Node.js, Git, and all about Web Development fundamentally.
• Follow me on X (Twitter) or LinkedIn if you don't want to miss the daily dose of Web Development and Programming Tips.
• Find all my public speaking talks here.
• Check out and follow my Open Source work on GitHub.

See you soon with my next article. Until then, please take care of yourself, and stay happy.

With useMemo, React can store the result of a function call and reuse it when the dependencies of that function haven't changed, rather than recalculating the value on every render.

useMemo stands out as a powerful tool for optimizing performance without sacrificing code readability or maintainability. But it's often overlooked or misunderstood by beginners.

In this comprehensive guide, we'll discuss what useMemo is, how it works, and why it's an essential tool for every React developer.

Table of Contents

1. What is useMemo?
2. How does useMemo Work?
3. When to Use useMemo?
   – Data Formatting
   – Filtering Data
   – Sorting Data
   – Memoizing Callback Functions
   – Expensive Calculations
4. Benefits of useMemo
5. Syntax and Usage of the useMemo Hook
   – Avoiding Unnecessary Recalculations
   – Optimizing Rendering Performance
   – Efficiently Managing Derived Data
   – Enhancing User Experience
6. How does useMemo differ from other hooks like useState and useEffect?
   – useState
   – useEffect
   – useMemo
7. How to Memoize Expensive Computations Using useMemo
   – Identify the Expensive Computation
   – Wrap the Computation with useMemo
   – Specify Dependencies
8. How to Optimize Complex Calculations within Render Props or Higher-Order Components
9. How to Use useMemo with Custom Hooks
10. Tips for Using useMemo Effectively
    – Identify expensive computations
    – Choose the right dependencies
    – Avoid unnecessary memorization
    – Measure performance
11. Conclusion

What is useMemo?

useMemo is a handy tool in React that helps make your apps faster. Imagine you have a function that does some heavy lifting, like calculating a complex math problem or formatting data. Normally, React recalculates this function every time your component renders, even if the inputs are the same. That can slow things down.

But with useMemo, React remembers the result of that function as long as its inputs stay the same. So, if your inputs don't change, React just grabs the stored result instead of recalculating it every time. This saves time and makes your app snappier.

In simple terms, useMemo is like having a smart assistant who remembers the answers to math problems, so you don't have to solve them again and again.

How Does useMemo Work?

To understand how useMemo works, let's consider a scenario where you have a component that renders a list of items, and you need to perform some heavy computation to derive the list.

Without memoization, this heavy computation would be executed on every render, even if the inputs remain unchanged.

Here's a basic example without useMemo:

import React from 'react';

const ListComponent = ({ items }) => {
  const processedItems = processItems(items); // Expensive computation

  return (
    <ul>
      {processedItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

const processItems = (items) => {
  // Expensive computation
  // Imagine some heavy processing here
  return items.map(item => ({ id: item.id, name: item.name.toUpperCase() }));
};

export default ListComponent;

In this example, processItems function gets called on every render, even if the items prop remains the same.

To optimize this, we can use useMemo:

import React, { useMemo } from 'react';

const ListComponent = ({ items }) => {
  const processedItems = useMemo(() => processItems(items), [items]);

  return (
    <ul>
      {processedItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

const processItems = (items) => {
  // Expensive computation
  // Imagine some heavy processing here
  return items.map(item => ({ id: item.id, name: item.name.toUpperCase() }));
};

export default ListComponent;

By wrapping the processItems call inside useMemo, React will only recompute the memoized value when the items prop changes. This optimization can significantly improve the performance of your application, especially when dealing with large datasets or complex computations.

When to Use useMemo

You should use useMemo in scenarios where you have expensive computations or data transformations within a functional component that are being unnecessarily recalculated on every render.

Here are some practical examples illustrating basic usage scenarios for useMemo:

Data Formatting:

const formattedData = useMemo(() => formatData(rawData), [rawData]);

• Use useMemo to format raw data into a display-friendly format.
• Recompute formattedData only when rawData changes, optimizing performance.

Filtering Data:

const filteredData = useMemo(() => filterData(rawData, filterCriteria), [rawData, filterCriteria]);

• Use useMemo to filter a list of data based on certain criteria.
• Ensure filteredData is recalculated only when rawData or filterCriteria change.

Sorting Data:

const sortedData = useMemo(() => sortData(rawData, sortKey), [rawData, sortKey]);

• Use useMemo to sort a list of data based on a specific key.
• Re-sort sortedData only when rawData or sortKey change.

Memoizing Callback Functions:

const handleClick = useMemo(() => {
  return () => {
    // Handle click event
  };
}, []);

• Use useMemo to memoize callback functions to prevent unnecessary function recreations on every render.
• Pass an empty dependency array ([]) to ensure the callback function is only created once during the component's lifecycle.

Expensive Calculations:

const result = useMemo(() => {
  // Perform expensive calculation
  return performCalculation(input1, input2);
}, [input1, input2]);

• Use useMemo to memoize the result of an expensive calculation.
• Recalculate result only when input1 or input2 change.

In each of these examples, useMemo ensures that the expensive computation or transformation is only performed when necessary, reducing unnecessary recalculations and optimizing the performance of your functional components.

Benefits of useMemo

Utilizing the useMemo hook in React applications offers numerous benefits for performance optimization.

Avoiding Unnecessary Recalculations:

In React, components re-render whenever their state or props change. If a component performs expensive computations or calculations within its rendering logic, these computations can be re-executed on every render, even if the inputs haven't changed.

By using useMemo, you can memoize these computations. React will only recalculate the memoized value when the dependencies (inputs) change. This helps avoid unnecessary recalculations, improving the performance of your components.

Optimizing Rendering Performance:

React components can become slow to render if they perform heavy computations or transformations during each render cycle. This is particularly problematic in large-scale applications or components that render frequently.

useMemo allows you to memoize the results of these computations, ensuring that they are only performed when necessary. This can lead to significant improvements in rendering performance by reducing the computational overhead of your components.

Efficiently Managing Derived Data:

In many React applications, derived data is computed from the state or props of components. For example, computed properties, filtered lists, or formatted data are often derived from raw data sources.

Memoizing derived data with useMemo ensures that these computations are performed efficiently and only when needed. This can prevent unnecessary re-renders and optimize the overall performance of your application.

Enhancing User Experience:

Performance optimization is crucial for delivering a smooth and responsive user experience. Slow or unresponsive components can lead to a poor user experience and frustrate users.

By leveraging useMemo to optimize the performance of your components, you can ensure that your application remains fast and responsive, improving user satisfaction and engagement.

useMemo is essential for performance optimization in React applications because it allows you to avoid unnecessary recalculations, optimize rendering performance, efficiently manage derived data, and enhance the overall user experience.

By memoizing expensive computations with useMemo, you can create fast, responsive, and efficient React components that deliver a seamless user experience.

Syntax and Usage of the useMemo Hook

The useMemo hook in React is used to memoize expensive computations. Its syntax is straightforward, and it takes two arguments: a function representing the computation to be memoized, and an array of dependencies.

Here's the syntax and usage of the useMemo hook:

import React, { useMemo } from 'react';

const MyComponent = ({ data }) => {
  // Memoize the result of the expensive computation
  const memoizedValue = useMemo(() => {
    // Perform some expensive computation using the data
    return processData(data);
  }, [data]); // Dependency array: recompute if 'data' changes

  return (
    <div>
      {/* Render the memoized value */}
      <p>{memoizedValue}</p>
    </div>
  );
};

export default MyComponent;

In this example:

1. We import useMemo from the React library.
2. Inside the functional component MyComponent, we declare a constant memoizedValue using the useMemo hook.
3. The first argument of useMemo is a function that performs the expensive computation. In this case, we call processData function and pass data as a parameter.
4. The second argument of useMemo is an array of dependencies. React will only recompute the memoized value if any of these dependencies change. Here, we specify [data] as the dependency array, indicating that memoizedValue should be recalculated whenever the data prop changes.
5. Finally, we render the memoizedValue inside the component's JSX.

By using useMemo, we ensure that the expensive computation inside the function is only executed when necessary, optimizing the performance of our component.

How Does useMemo Differ from Other Hooks Like useState and useEffect?

useMemo differs from other hooks like useState and useEffect in its purpose and how it affects component behavior:

useState:

• useState is used for managing state within functional components.
• It allows you to create and update state variables, triggering re-renders when their values change.
• State variables managed by useState are typically used for storing data that can change over time, such as form inputs, toggles, or counters.

useEffect:

• useEffect is used for handling side effects within functional components.
• It runs after every render and enables you to perform tasks like data fetching, subscriptions, or DOM manipulation.
• useEffect allows you to separate side effects from the main component logic, keeping your components clean and organized.

useMemo:

• useMemo is used for memoizing expensive computations within functional components.
• It caches the result of a function and returns the cached result when the inputs to the function remain unchanged.
• Unlike useState and useEffect, which manage state and side effects respectively, useMemo focuses solely on optimizing performance by avoiding unnecessary recalculations.

While useState and useEffect are used for managing state and handling side effects, respectively, useMemo is specifically designed for performance optimization by memoizing computations. Each hook serves a distinct purpose in React development, but they can be used together to build efficient and maintainable components.

How to Memoize Expensive Computations using useMemo

To memoize expensive computations using useMemo, follow these steps:

Identify the Expensive Computation:

Determine which computations in your component are expensive and would benefit from memoization. These could include complex calculations, data transformations, or function calls that consume significant resources.

Wrap the Computation with useMemo:

Use the useMemo hook to memoize the result of the computation. The first argument to useMemo is a function that performs the computation, and the second argument is an array of dependencies.

Specify Dependencies:

Provide an array of dependencies to useMemo to indicate when the memoized value should be recalculated. If any of the dependencies change, useMemo will recompute the memoized value.

Here's an example of how to memoize an expensive computation using useMemo:

import React, { useMemo } from 'react';

const MyComponent = ({ data }) => {
  // Memoize the result of the expensive computation
  const memoizedValue = useMemo(() => {
    // Perform the expensive computation here
    return processData(data);
  }, [data]); // 'data' is a dependency

  return (
    <div>
      {/* Render the memoized value */}
      <p>{memoizedValue}</p>
    </div>
  );
};

export default MyComponent;

In this example:

• We use useMemo to memoize the result of the processData function, which performs the expensive computation.
• The data prop is specified as a dependency in the dependency array [data]. This means that memoizedValue will be recalculated whenever the data prop changes.
• The memoized value (memoizedValue) is then rendered inside the component's JSX.

By memoizing the expensive computation with useMemo, we ensure that it is only recomputed when necessary, optimizing the performance of our component.

How to Optimize Complex Calculations within Render Props or Higher-order Components

useMemo can also be effectively utilized within render props or higher-order components (HOCs) to optimize complex calculations. Consider the following HOC example:

import React, { useMemo } from 'react';

const withDataFetching = (WrappedComponent) => {
  return function WithDataFetching({ data }) {
    // Memoize the processedData calculation
    const processedData = useMemo(() => processData(data), [data]);

    return <WrappedComponent processedData={processedData} />;
  };
};

const DisplayData = ({ processedData }) => {
  return (
    <div>
      {processedData.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

const processData = (data) => {
  // Expensive computation
  // Imagine some heavy processing here
  return data.map(item => ({ id: item.id, name: item.name.toUpperCase() }));
};

export default withDataFetching(DisplayData);

In this example, processedData is memoized within the withDataFetching HOC using useMemo. This optimization ensures that the heavy computation in processData is only performed when the data prop changes, improving the overall performance of the component.

How to Use useMemo with Custom Hooks

Another powerful use case for useMemo is within custom hooks to memoize values across components. Let's create a custom hook that fetches data from an API and memoizes the result:

import { useState, useEffect, useMemo } from 'react';

const useDataFetching = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [url]);

  // Memoize the data value
  const memoizedData = useMemo(() => data, [data]);

  return memoizedData;
};

export default useDataFetching;

Now, whenever we use useDataFetching hook in a component, the data value will be memoized using useMemo. This ensures that the fetched data is only recalculated when the URL changes, preventing unnecessary API calls and improving performance across components.

Tips for Using useMemo Effectively

Here are some tips for using useMemo effectively:

1. Identify expensive computations: Identify the parts of your application that involve heavy computations or calculations.
2. Choose the right dependencies: Ensure that you include all the necessary dependencies in the dependency array. Missing dependencies could lead to unexpected behavior.
3. Avoid unnecessary memoization: Avoid memorizing values that don't need to be memoized, as it can add unnecessary complexity to your code.
4. Measure performance: Use performance monitoring tools to measure the impact of useMemo on your application's performance and adjust accordingly.

Conclusion

useMemo is a powerful tool for optimizing the performance of your React applications by memoizing the result of expensive computations.

By using useMemo effectively, you can prevent unnecessary re-renders and improve the overall responsiveness of your application.

So, don't ignore useMemo just because it seems intimidating. Embrace it as a valuable tool in your React development journey, and harness its potential to create faster and more efficient web applications.

You may think of using the useEffect hook for simple fetching operations, but it will not help you with caching, request deduplication, always serving real-time data, and so on.

Things will get more complicated when you try to implement them by yourself. But fortunately, the SWR library helps us solve some common problems and it also simplifies development.

What is the SWR Library?

According to the SWR documentation:

The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861.

SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

With the help of this strategy, you can make sure to always display up-to-date data to your users.

So, SWR is a library built upon the stale-while-revalidate strategy, and it provides React hooks for data fetching.

Before moving on to the details, let's look at the two most important concepts of SWR.

Caching

A cache stores data for a specified amount of time and serves this data to users who request it within that period of time.

The time can be a certain period like 5000ms or can be an event like re-connecting to the Internet.

SWR automatically caches the fetched data, helping to quickly serve the data without making redundant network requests.

Revalidation

When the valid time is exceeded, the data becomes stale. When a user requests this data you should revalidate it before serving it.

If the data is stale, SWR revalidates it (re-fetches from the server) to keep it fresh.

By default, SWR automatically revalidates the data (it assumes that the data is stale) in three cases:

1. Every time the component is mounted, even if there is data in the cache, it revalidates.
2. It revalidates when the window gets focused.
3. It revalidates when the browser regains its network connection.

How to Use the useSWR Hook

The useSWR hook is the main hook of the library. In your projects, you'll almost always use this hook.

It accepts three parameters: key, fetcher, and options.

• key is a unique string for the request like an id.
• fetcher is an async function that accepts the key and returns the data. SWR automatically passes the key to the fetcher function when loading the data.
• options is an object of options available for the hook. For example, you can specify the cache time in the options object.

And it returns an object with data, error, isValidating, isLoading, and mutate properties.

• data is the variable returned from the fetcher function. During the first request, it will be undefined.
• error is the error thrown by the fetcher function. If there is no error, it will be undefined.
• isLoading is a boolean that indicates the first request's status. It is true during the first request, and it will always be false thereafter.
• isValidating is also a boolean that indicates the request's status. It is true during each request including the first one.
• mutate is a function for manually triggering a revalidation.

How I Used SWR in My Project

The best thing about SWR is how easy it is to use. I tried out it in my first project for the Front End Libraries Certification of freeCodeCamp and liked it very much.

I used TypeScript for the project, but will give you examples with JavaScript. So, don't worry if you don't know TypeScript – I highly recommend giving it a try if you haven't yet.

Also, if you are interested, you can find the project's code in its GitHub repository.

How to Add the swr Dependency to the Project

To be able to use the library, you can install it via npm, pnpm, or yarn. I prefer using pnpm as the package manager for my project.

$ npm i swr
# or
$ pnpm add swr
# or
$ yarn add swr

Create the fetcher Function

The goal of this function is to fetch the data by URL and return it. I will use the function with SWR.

const fetcher = async (url) => {
  const { data } = await axios.get(url);

  return data;
};

The fetcher function:

• accepts a url parameter,
• fetches the data with the get method of Axios,
• returns the data returned from the request.

Create a Hook That Fetches a Random Quote

Based on the SWR documentation, I created a hook called useRandomQuote. This hook is a wrapper for the useSWR hook. Thus, I can use the same data wherever needed.

import useSWR from 'swr/immutable';

const useRandomQuote = () => {
  const { data, ...restSWR } = useSWR(
    'https://api.quotable.io/quotes/random',
    fetcher
  );

  return {
    ...restSWR,
    quote: data?.[0],
  };
};

export { useRandomQuote };

The hook fetches the data with useSWR and returns an object that contains the variables destructured from the useSWR hook and the quote property which is the only element in the returned array. I used the Quotable API for a random quote, and the API returns an array with one element which is the random quote.

If you noticed, I imported the useSWR hook from swr/immutable in the code snippet. It is auto-revalidation disabled version of the hook. I prefer to use it because I want to revalidate the data manually with the mutate function.

How to Revalidate the Data Manually

If you want to manually revalidate the data, you can use the mutate function returned from the useSWR hook.

When the mutate function is called, SWR revalidates the data. During this process, the data variable remains the same (will not be undefined), and the isValidating variable becomes true.

The following diagram from the SWR documentation visualizes the revalidation process:

A diagram for the "Fetch and Revalidate" pattern in SWR

In my project, I have a QuoteCard component that displays the current quote. This component has a New Quote button that triggers retrieving a new random quote.

const QuoteCard = () => {
  const { /* ... */, mutate } = useRandomQuote();

  return (
    {/* ... */}
    <button
      // ...
      onClick={() => mutate()}
    >
      New Quote
    </button>
    {/* ... */}
  )
}

In the code above, I used the mutate function in the onClick handler of the New Quote button.

How to Handle Concurrent Requests

If the user initiates a new request alongside the ongoing one, this results in multiple concurrent requests. Each request waits for the previous one to complete before starting the process, resulting in unnecessary network usage and waiting time.

I faced the same issue in my project. When the user clicks the New Quote button while a request is still loading, the application triggers a new request alongside the existing one.

Concurrent requests that being triggered by clicking the "New Quote" button continuously

As you see in the GIF above, when I click the "New Quote" button consecutively, I have to wait for all requests to be done to see a random quote because SWR only updates the data after the last request is completed.

As a result, I should cancel the ongoing previous request after a new request is initiated. Although I checked SWR's documentation, I couldn't find a built-in solution for this issue. I tried to use AbortController with SWR, but couldn't succeed.

As a workaround, I disabled the New Quote button during validation to be able to prevent multiple concurrent requests.

A little note: I also checked React Query, and it has a built-in solution for that. I am planning to experiment with it in my next project involving remote data.

Conclusion

React doesn't care how you fetch and manage remote data. In this tutorial, you have learned how to do this with SWR. Although it has a big drawback regarding canceling concurrent requests, you can usually work around this and benefit from its upsides.

If you haven't used SWR before, I highly recommend trying it out in your future projects. It saves you time and prevents you from experiencing many types of bugs.

Thank you for reading. You can connect with me on Twitter or explore more on my personal website. Feel free to reach out — I'd love to hear from you!

This means that components can perform specific tasks at different stages of their existence, from the moment they are created to the point they are removed from the user interface.

Lifecycle methods have been a fundamental part of React for many years. But with the introduction of hooks, React's approach to managing state and side effects in functional components has become more intuitive and flexible.

Just a quick note: although hooks generally replace class components, there are no plans to remove classes from React.

Why This Guide?

In this tutorial, you will learn about class component lifecycle methods such as componentDidMount, componentDidUpdate, componentWillUnmount, and shouldComponentUpdate.

You'll also explore React hooks like useState, useEffect, and useContext, and understand why they were introduced. This will make your React journey smoother and more enjoyable.

Whether you're just getting started with React or looking to deepen your understanding, this guide will equip you with the knowledge you need to build responsive and interactive web applications using React's powerful tools.

Let's dive in and uncover the magic of React lifecycle methods and hooks.

How the Component Lifecycle Works

In React, components go through a lifecycle composed of distinct stages. Each of these stages offers specific methods that you can customize to run code at various moments during a component's existence.

These methods help you perform tasks such as initializing data, managing updates, and tidying up resources as needed.

Class Component Lifecycle Methods

Let's start by looking at the class component lifecycle methods. These were the primary way to manage component lifecycle before the introduction of hooks.

How to use componentDidMount:

This is called after a component has been inserted into the DOM. It's a great place to perform initial setup tasks, like fetching data from an API or setting up event listeners.

Code example:

import React, { Component } from 'react';

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    // This is where you can perform initial setup.

    // In this example, we simulate fetching data from an API after the             component has mounted.
    // We use a setTimeout to mimic an asynchronous operation.
    setTimeout(() => {
      const fetchedData = 'This data was fetched after mounting.';
      this.setState({ data: fetchedData });
    }, 2000); // Simulate a 2-second delay
  }

  render() {
    return (
      <div>
        <h1>componentDidMount Example</h1>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default MyComponent;

In this example, we created a class component called MyComponent. In the constructor, the component's state is initialized with data set to null, and we use it to store the fetched data.

In the componentDidMount method, we simulate fetching data from an API using setTimeout to mimic an asynchronous operation. After 2 seconds (2000 milliseconds), the component's state updates with the fetched data.

In the render method, content is conditionally rendered based on the data state. If data is null, a Loading data... message is displayed. Otherwise, the fetched data is displayed.

When you use this component in your application, you'll notice that the Loading data... message is shown initially, and after 2 seconds, the fetched data is displayed. This demonstrates how componentDidMount is useful for performing tasks after a component has been added to the DOM.

How to use componentDidUpdateB:

This is called after a component has re-rendered due to changes in its state or props. It's a great place to handle side effects or perform additional actions based on those changes.

Code Example:

import React, { Component } from 'react';

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  // This method will be called when the "Increment" button is clicked
  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  // componentDidUpdate is called after the component updates
  componentDidUpdate(prevProps, prevState) {
    // You can access the previous props and state here
    console.log('Component updated');
    console.log('Previous state:', prevState);
    console.log('Current state:', this.state);
  }

  render() {
    return (
      <div>
        <h1>Counter</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

export default Counter;

In this code example, we create a Counter class component with a constructor that initializes the count state to 0. The handleIncrement method updates the count state when the Increment button is clicked.

Inside the componentDidUpdate lifecycle method, we log a message (Component updated) to the console. We also log both the previous state (prevState) and the current state (this.state). This demonstrates how you can access both the previous and current values during an update. The render method displays the current count and a button to increment it.

Now, when you use this Counter component in your application, open the browser's console. Every time you click the Increment button, you'll see messages in the console indicating that the component has updated, along with the previous and current state values.

You can use componentDidUpdate for various purposes, such as making network requests when props or state change, updating the DOM based on state changes, or interacting with third-party libraries after an update. It provides a way to perform actions that should occur specifically after a component has re-rendered.

How to use componentWillUnmount

This is called just before a component is removed from the DOM. It's a crucial place to perform cleanup tasks, such as clearing timers, unsubscribing from events, or releasing resources to prevent [memory leaks](https://en.wikipedia.org/wiki/Memory_leak#:~:text=In computer science%2C a memory,longer needed is not released.).

Let's illustrate a simple React component that sets up a timer when it mounts, using componentDidMount method, and clears that timer when it unmounts using the componentWillUnmount method.

Code example:

import React, { Component } from 'react';

class TimerComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      seconds: 0,
    };
    this.timer = null; // Initialize the timer
  }

  // When the component mounts, start the timer
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000); // Update every 1 second (1000 milliseconds)
  }

  // When the component unmounts, clear the timer to prevent memory leaks
  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div>
        <h1>Timer Component</h1>
        <p>Elapsed Time: {this.state.seconds} seconds</p>
      </div>
    );
  }
}

export default TimerComponent;

In this example, we created the TimerComponent class. Inside the constructor, the component's state is initialized with a seconds property, which we'll use to keep track of the elapsed time. The timer variable is also set to null.

In the componentDidMount lifecycle method, the timer is started by using setInterval. This timer increments the seconds state property every second.

In the componentWillUnmount lifecycle method, the timer is cleared using clearInterval to ensure that it doesn't continue running after the component has been removed from the DOM.

In the render method, the elapsed time is displayed based on the seconds state property.

When you use this TimerComponent in your application and render it, you'll notice that the timer starts when the component is mounted and stops when the component is unmounted. This is thanks to the cleanup performed in the componentWillUnmount method. This prevents resource leaks and ensures that
the timer is properly managed throughout the component's lifecycle.

How to use shouldComponentUpdate

We use this lifecycle method to control whether a component should re-render when its state or props change. It is particularly useful for optimizing performance by preventing unnecessary renders.

Let's create a simple React class component and use the shouldComponentUpdate method to decide whether the component should re-render based on changes in its state.

Code Example:

import React, { Component } from 'react';

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Allow the component to re-render only if the count is even
    if (nextState.count % 2 === 0) {
      return true; // Re-render
    }
    return false; // Don't re-render
  }

  incrementCount = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <h1>Counter Example</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;

In this example, we created the Counter class component that maintains a count state, which starts at 0. In the shouldComponentUpdate method, we check whether the next state's count is even. If it is, we allow the component to re-render. Otherwise, we prevent the re-render.

The incrementCount method is called when the Increment button is clicked. It updates the count state by incrementing it.

In the render method, the current count and a button to increment it is displayed.

If you click the Increment button and the count becomes an odd number, the component won't re-render. This behavior demonstrates how shouldComponentUpdate can be used to optimize rendering in situations where not all state changes should trigger a re-render.

Introducing React Hooks

React introduced hooks in version 16.8. They granted functional components access to state and various React features without writing class components.

As a result, class components have become largely unnecessary. Hooks simplify component logic and make it more reusable.

Why use Hooks?

Hooks were introduced to address several issues and make React code easier to understand and maintain:

• Complexity – class components can become complex when managing state and side effects.

• Reusability – logic in class components isn't easily shareable between components.

• Learning Curve – class components introduce a steeper learning curve for newcomers to React.

Commonly used React Hooks

The useState hook

useState lets you add state to functional components. It returns an array with the current state value and a function to update it.

Code Example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, we used the useState hook to manage a counter's state. When the Increment button is clicked, setCount updates the count state, causing the component to re-render with the updated value.

The useEffect hook

useEffect is used for side effects in functional components, similar to componentDidMount and componentDidUpdate. It runs after rendering and can be controlled by specifying dependencies.

Code Example:

import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array, runs only once

  return <div>{data ? data.message : 'Loading...'}</div>;
}

In this example, useEffect is used to fetch data from an API when the component mounts. The empty dependency array [] ensures that the effect runs only once.
When the data is fetched, setData updates the data state, causing a re-render with the fetched information.

The useContext hook

useContext allows functional components to access context values. It's a way to pass data down the component tree without explicitly passing props.

Code Example:

import React, { useContext } from 'react';

// Create a context
const MyContext = React.createContext();

function MyComponent() {
  const value = useContext(MyContext);

  return <div>Context Value: {value}</div>;
}

In this example, we create a context called MyContext. The useContext hook allows MyComponent to access the value stored in this context. It's a powerful tool for managing global state in your application.

Benefits of custom hooks

Custom hooks are functions that use hooks internally and can be reused across multiple components. They help encapsulate and share complex logic.

Here's an example of a custom hook called useLocalStorage that simplifies storing and retrieving data in the browser's local storage:

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  // Retrieve the stored value from local storage
  const storedValue = localStorage.getItem(key);

  // Initialize the state with the stored value or the initial value
  const [value, setValue] = useState(storedValue || initialValue);

  // Update the local storage whenever the state changes
  const setStoredValue = (newValue) => {
    setValue(newValue);
    localStorage.setItem(key, newValue);
  };

  return [value, setStoredValue];
}

export default useLocalStorage;

In this custom hook, we import useState from React because we'll use it to manage the state. The useLocalStorage function takes two parameters:

• key: A string representing the key under which the data will be stored in local storage.

• **initialValue**: The initial value for the state.

Inside the hook, we first attempted to retrieve the stored value from local storage using localStorage.getItem(key). Then we initialized the state variable value using useState, using the storedValue if it exists or the initialValue if not.

Next, we defined a function setStoredValue that updates both the state and the local storage when called. It sets the new value in local storage using localStorage.setItem(key, newValue).

Finally, we returned an array [value, setStoredValue] as the hook's return value, allowing components to access the stored value and update it as needed.

Here's an example of how you can use the useLocalStorage hook in a component:

import React from 'react';
import useLocalStorage from './useLocalStorage'; // Import the custom hook

function App() {
  // Use the custom hook to manage a "username" stored in local storage
  const [username, setUsername] = useLocalStorage('username', 'Guest');

  const handleInputChange = (e) => {
    setUsername(e.target.value);
  };

  return (
    <div>
      <h1>Hello, {username}!</h1>
      <input
        type="text"
        placeholder="Enter your username"
        value={username}
        onChange={handleInputChange}
      />
    </div>
  );
}

export default App;

In this example, we import the useLocalStorage custom hook and use it to manage a username value in local storage. The component initializes the username state using the hook and updates it when the input field changes.

The value is stored and retrieved from local storage, allowing it to persist across page reloads.

Custom hooks are a powerful way to encapsulate and reuse complex logic in React applications, making your code more modular and maintainable.

Conclusion

React provides developers with powerful tools to manage the lifecycles of their components. These lifecycles allow components to perform specific tasks at different stages of their existence, from creation to removal.

In this guide, we've explored React's class component lifecycle methods. These methods have been a fundamental part of React for many years and continue to be relevant in certain scenarios.

You've also been introduced to React Hooks. These have become the preferred way to manage state and side effects in React applications. They offer a more intuitive and flexible approach to building components.

While hooks have gained popularity and generally replace the need for class components, it's important to note that there are no plans to remove class components from React. Existing codebases and third-party libraries may still use class components, so understanding both class component lifecycles and hooks is
valuable for React developers.

In summary, React's lifecycle methods and hooks are crucial for building dynamic and efficient applications, and they offer developers a range of options to manage component behavior and state. As you continue to explore and work with React,
you'll find that having a solid understanding of both lifecycles and hooks will make you a more versatile and capable React developer.

If you found this guide helpful and enjoyable, please give it a like. For more insightful tutorials, follow me on X for updates 🙏.

Enjoy your coding!

They enable us to easily reuse functionality across our application's components. What's best about hooks is their reusability – you can reuse your hooks both across components and your projects.

Here are seven of the most important React hooks that I reuse across every react project I create. Give them a try today and see if they're as useful for you when building your own React apps.

Before we begin, it's important to clarify that not every custom React hook needs to be written by you. In fact, all of the hooks that I will mention come from the library @mantine/hooks.

Mantine is great third-party library that includes these hooks and many more. They will add just about every significant feature to your React app that you can think of.

You can check out the documentation for @mantine/hooks at mantine.dev.

The useIntersection Hook

When a user scrolls down the page in your application, you may want to know when an element is visible to them.

For example, you might want to start an animation only when a user sees a specific element. Or, you may want to show or hide an element after they've scrolled a certain amount down the page.

useIntersection demo

To get information about whether an element is visible, we can use the Intersection Observer API. This is a JavaScript API that's built into the browser.

We can use the API on its own using plain JavaScript, but a great way to get information about whether a particular element is being intersected within its scroll container is to use the useIntersection hook.

import { useRef } from 'react';
import { useIntersection } from '@mantine/hooks';

function Demo() {
  const containerRef = useRef();
  const { ref, entry } = useIntersection({
    root: containerRef.current,
    threshold: 1,
  });

  return (
    <main ref={containerRef} style={{ overflowY: 'scroll', height: 300 }}>
      <div ref={ref}>
        <span>
          {entry?.isIntersecting ? 'Fully visible' : 'Obscured'}
        </span>
      </div>
    </main>
  );
}

To use it, all we need to do is call the hook in our component and provide a root element. Root is the scroll container, and this can be provided as a ref with the useRef hook. useIntersection returns a ref which we pass to the target element, whose intersection in the scroll container we want to observe.

Once we have a reference to the element, we can keep track of whether the element is intersecting or not. In the example above, we can see when the element is obscured or when it's fully visible based off the value of entry.isIntersecting.

You can pass additional arguments that allow you to configure the threshold which is related to what percentage of the target is visible.

The useScrollLock Hook

Another hook related to scrolling is the useScrollLock hook. This hook is very simple: it enables you to lock any scrolling on the body element.

I have found it to be helpful whenever you want to display an overlay or a modal over the current page and do not want to allow the user to scroll up and down on the page in the background. This lets you either focus attention on the modal or allow scrolling within its own scroll container.

import { useScrollLock } from '@mantine/hooks';
import { Button, Group } from '@mantine/core';
import { IconLock, IconLockOpen } from '@tabler/icons';

function Demo() {
  const [scrollLocked, setScrollLocked] = useScrollLock();

  return (
    <Group position="center">
      <Button
        onClick={() => setScrollLocked((c) => !c)}
        variant="outline"
        leftIcon={scrollLocked ? <IconLock size={16} /> : <IconLockOpen size={16} />}
      >
        {scrollLocked ? 'Unlock scroll' : 'Lock scroll'}
      </Button>
    </Group>
  );
}

useScrollLock locks the user's scroll at their current position on the page. The function returns an array, which can be destructured, as in the code above.

The second value is a function that allows us to lock the scroll. The first destructured value, on the other hand, is a boolean that tells us whether the scroll has been locked or not.

This value is useful for example, if you want to show certain content when the scroll is locked or to tell the user that it has been locked. You can see in the example below that we are indicating within our button when the scroll has been locked or unlocked.

useScrollLock demo

The useClipboard Hook

In many cases, you want to provide a button that allows the user to copy something to their clipboard, which is where copied text is stored.

A great example of this is if you have a code snippet on your website and you want to users to easily copy it. For this, we can use another web API – the Clipboard API.

@mantine/hooks gives us a convenient useClipboard hook, which returns a couple of properties: copied, which is a boolean that tells us whether a value has been copied to the clipboard using the hook as well as a copy function, to which we can pass whatever string value we like to it to be copied.

In our example, we would like to copy a code snippet for our users to paste where they like, as seen in the video below:

useClipboard demo

We call our copy function when they hit our designated copy button, pass to it the code snippet, and then show a little checkmark or something that indicates to them that the text has been copied.

What's neat is the useClipboard hook comes with a timeout value. After a given timeout period, which is in milliseconds, the copied state will be reset, showing the user that they can copy the text again.

The useDebouncedValue Hook

The next hook, useDebouncedValue, is essential if you have a search input in your app.

Whenever a user performs a search using an input, the search operation usually involves an HTTP request to an API.

A typical problem you will encounter, especially if you want your users to receive search results as they are typing, is that a query (request) will be performed on every keystroke. Even for a simple search query, there is no need to perform so many requests before a user has finished typing what they want.

This is a great use case for the useDebounceValue hook, which applies a debounce function on the text that's has been passed to it.

import { useState } from 'react';
import { useDebouncedValue } from '@mantine/hooks';
import { getResults } from 'api';

function Demo() {
  const [value, setValue] = useState('');
  const [results, setResults] = useState([])
  const [debounced] = useDebouncedValue(value, 200); // wait time of 200 ms

  useEffect(() => {
    if (debounced) {
      handleGetResults() 
    }

    async function handleGetResults() {
       const results = await getResults(debounced)   
       setResults(results)
    }
  }, [debounced])

  return (
    <>
      <input
        label="Enter search query"
        value={value}
        style={{ flex: 1 }}
        onChange={(event) => setValue(event.currentTarget.value)}
      />
      <ul>{results.map(result => <li>{result}</li>}</ul>
    </>
  );
}

You store the text from your input in a piece of state with useState and pass the state variable to useDebouncedValue.

As the second argument to that hook, you can provide a wait time, which is the period of time that the value is debounced. The debounce is what enables us to perform far fewer queries.

You can see the result in the video below where the user types something and only after 200 milliseconds, do we see the debounced value.

useDebouncedValue demo

The useMediaQuery Hook

Another very useful hook that I use all the time is the useMediaQuery hook.

Media Queries are used in plain CSS and the useMediaQuery hook allows us to subscribe to whatever media query we pass to the hook.

For example, within our component, let's say that we want to show some text or change the styles of a component based off of a certain screen width, such as 900 pixels. We provide a media query just like we would in CSS and useMediaQuery returns to us a matches value which is either true or false.

import { useMediaQuery } from '@mantine/hooks';

function Demo() {
  const matches = useMediaQuery('(min-width: 900px)');

  return (
    <div style={{ color: matches ? 'teal' : 'red' }}>
      {matches ? 'I am teal' : 'I am red'}
    </div>
  );
}

It tells us the result of that media query in JavaScript, which is particularly useful when we have styles that we want to change directly within our JSX using the style prop, for example.

useMediaQuery

In short, this is an essential hook for those handful of cases in which CSS cannot be used to handle media queries.

The useClickOutside Hook

This next hook – useClickOutside – might seem like a strange one, but you'll see how important it is when you actually need it.

When you develop a dropdown or something that pops up in front of a page's content and needs to be closed afterwards (such as a modal or drawer), this hook is indispensable. It's very easy to open one of these types of components by clicking a button. Closing these components is a little harder.

To follow good UX practices, we want anything that obstructs our user's view to be easily closable by clicking outside of the element. This is specifically what the useClickOutside hook lets us do.

When we call useClickOutside, it returns a ref that we must pass to the element outside of which we want to detect clicks. Usually that element is going to be controlled by a boolean piece of state such as the one we have in our example below (that is, the value opened).

import { useState } from 'react';
import { useClickOutside } from '@mantine/hooks';

function Demo() {
  const [opened, setOpened] = useState(false);
  const ref = useClickOutside(() => setOpened(false));

  return (
    <>
      <button onClick={() => setOpened(true)}>Open dropdown</button>
      {opened && (
        <div ref={ref} shadow="sm">
          <span>Click outside to close</span>
        </div>
      )}
    </>
  );
}

useClickOutside accepts a callback function which controls what happens when you actually click outside that element.

In most cases, we want to do something quite simple, which is to just close it. To do so, you'll likely need to have a state setter (like setOpened) and pass it a value of false to then hide your overlayed content.

useClickOutside demo

The useForm Hook

My favorite and most helpful hook in this list is the useForm hook.

This hook comes specifically from Mantine and involves installing a specific package from the library: @mantine/form. It should give you everything that you need to create forms in React, including the ability to validate inputs, display error messages, and ensure the input values are correct before the form is submitted.

useForm accepts some initial values which correspond to whatever inputs you have within your form.

import { TextInput, Button } from '@mantine/core';
import { useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    initialValues: {
      email: ''
    },

    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
    },
  });

  return (
    <div>
      <form onSubmit={form.onSubmit((values) => console.log(values))}>
        <TextInput
          withAsterisk
          label="Email"
          placeholder="your@email.com"
          {...form.getInputProps('email')}
        />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}

The great benefit of useForm is its helpers, such as the validate function, which receives the value that's been typed in to each input then allows you to create validation rules.

For example, if you have an email input, you might have a regular expression to determine whether it is in fact a valid email (as you can see in the code above). If not, then you can show an error message and prevent the form from being submitted.

useForm demo

How do you get the values that have been typed into the form?

Mantine provides a very convenient helper called getInputProps, where you simply provide the name of the input you're working with (like email) and it automatically sets up an onChange to keep track of the values that you've typed into your form.

Additionally, to handle form submission and prevent submission if its values do not pass validation rules, it has a special onSubmit function which you wrap around your regular onSubmit function. On top of applying the validation rules, it will take care of calling preventDefault() on the form event so that you don't have to do it manually.

I am just scratching the surface with this hook, but I would highly recommend you use it for your next project. Forms are traditionally a pain to get working properly, especially forms that require validation and visible error messages. useForm makes it incredibly easy!

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

But later, they'll find that they need to make changes to the file and doing so becomes a humungous task. Then they'll have to re-work things to separate these two parts.

This comes from not knowing about the separation of concerns and the presentation and container components pattern. That's why I'm going to teach you about them so you can mitigate this problem early in your project's development lifecycle.

In this article, we are going to dive into container and presentational components and briefly touch on the concept of separation of concerns.

Without further ado, let's get started!

Table of Contents

• What is the separation of concerns?
• What are presentation and container components?
• Why do we need these components?
• Presentation and container component example
• How to replace container components with React hooks
• Summary

What is the Separation of Concerns?

Separation of concerns is a concept that is widely used in programming. It states that logic that performs different actions should not be groupled or combined together.

For example, what we discussed in the introduction section violates the separation of concerns, because we placed the logic of fetching the data and presenting the data in the same component.

To solve this and to adhere to the separation of concerns, we should separate these two pieces of logic – that is, fetching data and presenting it on the UI – into two different components.

This is were the container and presentation component pattern will help us solve this issue. In the following sections, we are going to dive deep into this pattern.

What are Container and Presentational Components?

To achieve a separation of concerns we have two types of components:

• Container components
• Presentational components

Container components

These are the components that provide, create, or hold data for the children components.

The only job of a container component is to handle data. It does not consist of any UI of its own. Rather, it consists of presentational components as its children that uses this data.

A simple example would be a component named FetchUserContainer that consists of some logic that fetches all the users.

Presentational components

These are the components whose primary responsibility is to present the data on the UI. They take in the data from the container components.

These components are stateless unless they need their own state for rendering the UI. They do not alter the data that they receive.

An example of this would be a UserList component that displays all the users.

Why Do We Need These Components?

To understand this, let's take a simple example. We want to display a list of posts that we fetch from the JSON placeholder API. Here is the code for the same:

import { useEffect, useState } from "react";

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

/**
 * An example of how we shouldn't combine the logic and presentation of data.
 */
export default function DisplayPosts() {
  const [posts, setPosts] = useState<Post[] | null>(null);
  const [isLoading, setIsLoading] = useState<Boolean>(false);
  const [error, setError] = useState<unknown>();

// Logic
  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await resp.json();
        setPosts(data);
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

// Presentation
  return isLoading ? (
    <span>Loading... </span>
  ) : posts ? (
    <ul>
      {posts.map((post: Post) => (
        <li key={`item-${post.id}`}>
          <span>{post.title}</span>
        </li>
      ))}
    </ul>
  ) : (
    <span>{JSON.stringify(error)}</span>
  );
}

Here is what this component does:

• It has 3 state variables: posts, isLoading, and error.
• We have a useEffect hook that consists of the business logic. Here we are fetching the data from the API: [https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts) with the fetch API.
• We make sure that when the data is fetched, we store it in the posts state variable using setPosts.
• We also make sure that we toggle the isLoading and error values during the respective scenarios.
• We put this entire logic inside an async IIFE.
• Finally, we return the posts in the form of an unordered list and map through all the posts that we fetched earlier.

The problem with the above is that the logic of fetching the data and displaying the data is coded into a single component. We can say that the component is now tightly coupled with the logic. This is the exact thing that we don’t want.

Below are some reasons as to why we require container and presentational components:

• They help us create components that are loosely coupled
• They help us maintain separation of concerns
• Code refactoring becomes much easier.
• Code becomes more organized and maintainable
• It makes testing much easier.

Presentation and Container Component Example

Ok, enough talk – let’s get things working by starting off with a simple example. We are going to use the same example as above – fetching the data from a JSON placeholder API.

Let's understand the file structure here:

• Our container component will be PostContainer
• We will be having two presentation components:
  • Posts: A component that has an unordered list.
  • SinglePost: A component that renders a list tag. This will render each element of the list.

Note: We are going to store all the above components in a separate folder named components.

Now that we know which things go where, let's start off with the container component: PostContainer. Copy-paste the below code into the components/PostContainer.tsx file

import { useEffect, useState } from "react";
import { ISinglePost } from "../Definitions";
import Posts from "./Posts";

export default function PostContainer() {
  const [posts, setPosts] = useState<ISinglePost[] | null>(null);
  const [isLoading, setIsLoading] = useState<Boolean>(false);
  const [error, setError] = useState<unknown>();

  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await resp.json();
        setPosts(data.filter((post: ISinglePost) => post.userId === 1));
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

  return isLoading ? (
    <span>Loading... </span>
  ) : posts ? (
    <Posts posts={posts} />
  ) : (
    <span>{JSON.stringify(error)}</span>
  );
}

From the example we saw in the previous section of this article, the above code just contains the logic of fetching the data. This logic is present in the useEffect hook. Here this container component passes this data to the Posts presentational component.

Let's have a look at the Posts presentational component. Copy-paste the below code in the components/Posts.tsx file:

/**
 * A presentational component
 */

import { ISinglePost } from "../Definitions";
import SinglePost from "./SinglePost";

export default function Posts(props: { posts: ISinglePost[] }) {
  return (
    <ul
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center"
      }}
    >
      {props.posts.map((post: ISinglePost) => (
        <SinglePost {...post} />
      ))}
    </ul>
  );
}

As you can see, this is a simple file that consists of a ul tag – an unordered list. This component then maps over the posts that are being passed as props. We pass each to the SinglePost component.

There is another presentational component that renders the list tag, that is the li tag. It displays the title and the body of the post. Copy-paste the below code in the components/SinglePost.tsx file:

import { ISinglePost } from "../Definitions";

export default function SinglePost(props: ISinglePost) {
  const { userId, id, title, body } = props;
  return (
    <li key={`item-${userId}-${id}`} style={{ width: 400 }}>
      <h4>
        <strong>{title}</strong>
      </h4>
      <span>{body}</span>
    </li>
  );
}

These presentational components, as you can see, just display the data on the screen. That’s all. They don’t do anything else. Since they are just displaying the data here, they will also have their own styling.

Now that we have setup the components, let's look back on what we have achieved here:

• The concept of separation of concerns is not violated in this example.
• Writing unit tests for each component becomes easier.
• Code maintainability and readability are much better. Thus our codebase has become much more organized.

We have achieved what we wanted here, but we can further enhance this pattern with the help of hooks.

How to Replace Container Components with React Hooks

Since React 16.8.0, it has become so much easier to build and develop components with the help of functional components and hooks.

We are going to leverage these capabilities here and replace the container component with a hook.

Copy-paste the below code in the hooks/usePosts.ts file:

import { useEffect, useState } from "react";
import { ISinglePost } from "../Definitions";

export default function usePosts() {
  const [posts, setPosts] = useState<ISinglePost[] | null>(null);
  const [isLoading, setIsLoading] = useState<Boolean>(false);
  const [error, setError] = useState<unknown>();

  useEffect(() => {
    (async () => {
      try {
        setIsLoading(true);
        const resp = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await resp.json();
        setPosts(data.filter((post: ISinglePost) => post.userId === 1));
        setIsLoading(false);
      } catch (err) {
        setError(err);
        setIsLoading(false);
      }
    })();
  }, []);

  return {
    isLoading,
    posts,
    error
  };
}

Here we have,

• Extracted logic that was present in the PostContainer component into a hook.
• This hook will return an object that contains the isLoading, posts, and error values.

Now we can simply remove the container component PostContainer. Then, rather than passing the container's data to the presentational components as a prop, we can directly use this hook inside the Posts presentational component.

Make the following edits to the Posts component:

/**
 * A presentational component
 */

import { ISinglePost } from "../Definitions";
import usePosts from "../hooks/usePosts";
import SinglePost from "./SinglePost";

export default function Posts(props: { posts: ISinglePost[] }) {
  const { isLoading, posts, error } = usePosts();

  return (
    <ul
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center"
      }}
    >
      {isLoading ? (
        <span>Loading...</span>
      ) : posts ? (
        posts.map((post: ISinglePost) => <SinglePost {...post} />)
      ) : (
        <span>{JSON.stringify(error)}</span>
      )}
    </ul>
  );
}

By making use of hooks we have eliminated an extra layer of component that was present on top of these presentational components.

With hooks, we achieved the same results as that of the container/presentational components pattern.

Summary

So in this article, we learned about:

• Separation of concerns
• Container and presentational components
• Why we need these components
• How hooks can replace container components

For further reading I would highly recommend going through the react-table:. This library extensively uses hooks and it has great examples.

You can find the entire code for this article in this codesandbox.

Thanks for reading!

Follow me on Twitter, GitHub, and LinkedIn.

You'll see why you should use Axios as a data fetching library, how to set it up with React, and perform every type of HTTP request with it.

Then we'll touch on more advanced features like creating an Axios instance for reusability, using async-await with Axios for simplicity, and how to use Axios as a custom hook.

Let's dive right in!

Want Your Own Copy?‬ 📄

Click here to download the cheatsheet in PDF format (it takes 5 seconds).

It includes all of the essential information here as a convenient PDF guide.

Table of Contents

• What is Axios?
• Why Use Axios in React?
• How to Set Up Axios with React
• How to Make a GET Request (Retrieve Data)
• How to Make a POST Request (Create Data)
• How to Make a PUT Request (Update Data)
• How to Make a DELETE Request (Delete Data)
• How to Handle Errors with Axios
• How to Create an Axios Instance
• How to Use the Async-Await Syntax with Axios
• How to Create a Custom useAxios Hook

What is Axios?

Axios is an HTTP client library that allows you to make requests to a given endpoint:

This could be an external API or your own backend Node.js server, for example.

By making a request, you expect your API to perform an operation according to the request you made.

For example, if you make a GET request, you expect to get back data to display in your application.

Why Use Axios in React

There are a number of different libraries you can use to make these requests, so why choose Axios?

Here are five reasons why you should use Axios as your client to make HTTP requests:

1. It has good defaults to work with JSON data. Unlike alternatives such as the Fetch API, you often don't need to set your headers. Or perform tedious tasks like converting your request body to a JSON string.
2. Axios has function names that match any HTTP methods. To perform a GET request, you use the .get() method.
3. Axios does more with less code. Unlike the Fetch API, you only need one .then() callback to access your requested JSON data.
4. Axios has better error handling. Axios throws 400 and 500 range errors for you. Unlike the Fetch API, where you have to check the status code and throw the error yourself.
5. Axios can be used on the server as well as the client. If you are writing a Node.js application, be aware that Axios can also be used in an environment separate from the browser.

How to Set Up Axios with React

Using Axios with React is a very simple process. You need three things:

1. An existing React project
2. To install Axios with npm/yarn
3. An API endpoint for making requests

The quickest way to create a new React application is by going to react.new.

If you have an existing React project, you just need to install Axios with npm (or any other package manager):

npm install axios

In this guide, you'll use the JSON Placeholder API to get and change post data.

Here is a list of all the different routes you can make requests to, along with the appropriate HTTP method for each:

Here is a quick example of all of the operations you'll be performing with Axios and your API endpoint — retrieving, creating, updating, and deleting posts:

How to Make a GET Request

To fetch data or retrieve it, make a GET request.

First, you're going to make a request for individual posts. If you look at the endpoint, you are getting the first post from the /posts endpoint:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts/1";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);

  if (!post) return null;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

To perform this request when the component mounts, you use the useEffect hook. This involves importing Axios, using the .get() method to make a GET request to your endpoint, and using a .then() callback to get back all of the response data.

The response is returned as an object. The data (which is in this case a post with id, title, and body properties) is put in a piece of state called post which is displayed in the component.

Note that you can always find the requested data from the .data property in the response.

How to Make a POST Request

To create new data, make a POST request.

According to the API, this needs to be performed on the /posts endpoint. If you look at the code below, you'll see that there's a button to create a post:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function createPost() {
    axios
      .post(baseURL, {
        title: "Hello World!",
        body: "This is a new post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={createPost}>Create Post</button>
    </div>
  );
}

When you click on the button, it calls the createPost function.

To make that POST request with Axios, you use the .post() method. As the second argument, you include an object property that specifies what you want the new post to be.

Once again, use a .then() callback to get back the response data and replace the first post you got with the new post you requested.

This is very similar to the .get() method, but the new resource you want to create is provided as the second argument after the API endpoint.

How to Make a PUT Request

To update a given resource, make a PUT request.

In this case, you'll update the first post.

To do so, you'll once again create a button. But this time, the button will call a function to update a post:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function updatePost() {
    axios
      .put(`${baseURL}/1`, {
        title: "Hello World!",
        body: "This is an updated post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={updatePost}>Update Post</button>
    </div>
  );
}

In the code above, you use the PUT method from Axios. And like with the POST method, you include the properties that you want to be in the updated resource.

Again, using the .then() callback, you update the JSX with the data that is returned.

How to Make a DELETE Request

Finally, to delete a resource, use the DELETE method.

As an example, we'll delete the first post.

Note that you do not need a second argument whatsoever to perform this request:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    axios
      .delete(`${baseURL}/1`)
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

In most cases, you do not need the data that's returned from the .delete() method.

But in the code above, the .then() callback is still used to ensure that your request is successfully resolved.

In the code above, after a post is deleted, the user is alerted that it was deleted successfully. Then, the post data is cleared out of the state by setting it to its initial value of null.

Also, once a post is deleted, the text "No post" is shown immediately after the alert message.

How to Handle Errors with Axios

What about handling errors with Axios?

What if there's an error while making a request? For example, you might pass along the wrong data, make a request to the wrong endpoint, or have a network error.

To simulate an error, you'll send a request to an API endpoint that doesn't exist: /posts/asdf.

This request will return a 404 status code:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    // invalid url will trigger an 404 error
    axios.get(`${baseURL}/asdf`).then((response) => {
      setPost(response.data);
    }).catch(error => {
      setError(error);
    });
  }, []);

  if (error) return `Error: ${error.message}`;
  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

In this case, instead of executing the .then() callback, Axios will throw an error and run the .catch() callback function.

In this function, we are taking the error data and putting it in state to alert our user about the error. So if we have an error, we will display that error message.

In this function, the error data is put in state and used to alert users about the error. So if there's an error, an error message is displayed.

When you run this code code, you'll see the text, "Error: Request failed with status code 404".

How to Create an Axios Instance

If you look at the previous examples, you'll see that there's a baseURL that you use as part of the endpoint for Axios to perform these requests.

However, it gets a bit tedious to keep writing that baseURL for every single request. Couldn't you just have Axios remember what baseURL you're using, since it always involves a similar endpoint?

In fact, you can. If you create an instance with the .create() method, Axios will remember that baseURL, plus other values you might want to specify for every request, including headers:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    client.get("/1").then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    client
      .delete("/1")
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

The one property in the config object above is baseURL, to which you pass the endpoint.

The .create() function returns a newly created instance, which in this case is called client.

Then in the future, you can use all the same methods as you did before, but you don't have to include the baseURL as the first argument anymore. You just have to reference the specific route you want, for example, /, /1, and so on.

How to Use the Async-Await Syntax with Axios

A big benefit to using promises in JavaScript (including React applications) is the async-await syntax.

Async-await allows you to write much cleaner code without then and catch callback functions. Plus, code with async-await looks a lot like synchronous code, and is easier to understand.

But how do you use the async-await syntax with Axios?

In the example below, posts are fetched and there's still a button to delete that post:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    async function getPost() {
      const response = await client.get("/1");
      setPost(response.data);
    }
    getPost();
  }, []);

  async function deletePost() {
    await client.delete("/1");
    alert("Post deleted!");
    setPost(null);
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

However in useEffect, there's an async function called getPost.

Making it async allows you to use the await keword to resolve the GET request and set that data in state on the next line without the .then() callback.

Note that the getPost function is called immediately after being created.

Additionally, the deletePost function is now async, which is a requirement to use the await keyword which resolves the promise it returns (every Axios method returns a promise to resolve).

After using the await keyword with the DELETE request, the user is alerted that the post was deleted, and the post is set to null.

As you can see, async-await cleans up the code a great deal, and you can use it with Axios very easily.

How to Create a Custom useAxios Hook

Async-await is a great way to simplify your code, but you can take this a step further.

Instead of using useEffect to fetch data when the component mounts, you could create your own custom hook with Axios to perform the same operation as a reusable function.

While you can make this custom hook yourself, there's a very good library that gives you a custom useAxios hook called use-axios-client.

First, install the package:

npm install use-axios-client

To use the hook itself, import useAxios from use-axios-client at the top of the component.

Because you no longer need useEffect, you can remove the React import:

import { useAxios } from "use-axios-client";

export default function App() {
  const { data, error, loading } = useAxios({
    url: "https://jsonplaceholder.typicode.com/posts/1"
  });

  if (loading || !data) return "Loading...";
  if (error) return "Error!";

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  ) 
}

Now you can call useAxios at the top of the app component, pass in the URL you want to make a request to, and the hook returns an object with all the values you need to handle the different states: loading, error and the resolved data.

In the process of performing this request, the value loading will be true. If there's an error, you'll want to display that error state. Otherwise, if you have the returned data, you can display it in the UI.

The benefit of custom hooks like this is that it really cuts down on code and simplifies it overall.

If you're looking for even simpler data fetching with Axios, try out a custom useAxios hook like this one.

What's Next?

Congratulations! You now know how to use one of the most powerful HTTP client libraries to power your React applications.

I hope you got a lot out of this guide.

Remember that you can download this guide as a PDF cheatsheet to keep for future reference.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

I created this resource to give you the most complete and beginner-friendly path to learn React from the ground up.

By the end you will have a thorough understanding of tons of essential React concepts, including:

• The Why, What, and How of React
• How to Easily Create React Apps
• JSX and Basic Syntax
• JSX Elements
• Components and Props
• Events in React
• State and State Management
• The Basics of React Hooks

Want Your Own Copy?‬ 📄

Download the cheatsheet in PDF format here (it takes 5 seconds).

Here are some quick wins from grabbing the downloadable version:

• Quick reference guide to review however and whenever
• Tons of copyable code snippets for easy reuse
• Read this massive guide wherever suits you best. On the train, at your desk, standing in line... anywhere.

There's a ton of great stuff to cover, so let's get started.

React Basics

What is React, really?

React is officially defined as a "JavaScript library for creating user interfaces," but what does that really mean?

React is a library, made in JavaScript and which we code in JavaScript, to build great applications that run on the web.

What do I need to know to learn React?

In other words, you do need to have a basic understanding of JavaScript to become a solid React programmer?

The most basic JavaScript concepts you should be familiar with are variables, basic data types, conditionals, array methods, functions, and ES modules.

How do I learn all of these JavaScript skills? Check out the comprehensive guide to learn all of the JavaScript you need for React.

If React was made in JavaScript, why don't we just use JavaScript?

React was written in JavaScript, which was built from the ground up for the express purpose of building web applications and gives us tools to do so.

JavaScript is a 20+ year old language which was created for adding small bits of behavior to the browser through scripts and was not designed for creating complete applications.

In other words, while JavaScript was used to create React, they were created for very different purposes.

Can I use JavaScript in React applications?

Yes! You can include any valid JavaScript code within your React applications.

You can use any browser or window API, such as geolocation or the fetch API.

Also, since React (when it is compiled) runs in the browser, you can perform common JavaScript actions like DOM querying and manipulation.

How to Create React Apps

Three different ways to create a React application

1. Putting React in an HTML file with external scripts
2. Using an in-browser React environment like CodeSandbox
3. Creating a React app on your computer using a tool like Create React App

What is the best way to create a React app?

Which is the best approach for you? The best way to create your application depends on what you want to do with it.

If you want to create a complete web application that you want to ultimately push to the web, it is best to create that React application on your computer using a tool like Create React App.

If you are interested in creating React apps on your computer, check out the complete guide to using Create React App.

The easiest and most beginner-friendly way to create and build React apps for learning and prototyping is to use a tool like CodeSandbox. You can create a new React app in seconds by going to react.new!

JSX Elements

JSX is a powerful tool for structuring applications

JSX is meant to make creating user interfaces with JavaScript applications easier.

It borrows its syntax from the most widely used programming language: HTML. As a result, JSX is a powerful tool to structure our applications.

The code example below is the most basic example of a React element which displays the text "Hello World":

<div>Hello React!</div>

Note that to be displayed in the browser, React elements need to be rendered (using ReactDOM.render()).

How JSX is different from HTML

We can write valid HTML elements in JSX, but what differs slightly is the way some attributes are written.

Attributes that consist of multiple words are written in the camel-case syntax (like className) and have different names than standard HTML (class).

<div id="header">
  <h1 className="title">Hello React!</h1>
</div>

JSX has this different way of writing attributes because it is actually made using JavaScript functions (more on this later).

JSX must have a trailing slash if it is made of one tag

Unlike standard HTML, elements like input, img, or br must close with a trailing forward slash for it to be valid JSX.

<input type="email" /> // <input type="email"> is a syntax error

JSX elements with two tags must have a closing tag

Elements that should have two tags, such as div, main or button, must have their closing, second tag in JSX, otherwise it will result in a syntax error.

<button>Click me</button> // <button> or </button> is a syntax error

How JSX elements are styled

Inline styles are written differently as well as compared to plain HTML.

• Inline styles must not be included as a string, but within an object.
• Once again, the style properties that we use must be written in the camel-case style.

<h1 style={{ color: "blue", fontSize: 22, padding: "0.5em 1em" }}>
  Hello React!
</h1>;

Style properties that accept pixel values (like width, height, padding, margin, etc), can use integers instead of strings. For example, fontSize: 22 instead of fontSize: "22px".

JSX can be conditionally displayed

New React developers may be wondering how it is beneficial that React can use JavaScript code.

One simple example if that to conditionally hide or display JSX content, we can use any valid JavaScript conditional, like an if statement or switch statement.

const isAuthUser = true;

if (isAuthUser) {
  return <div>Hello user!</div>   
} else {
  return <button>Login</button>
}

Where are we returning this code? Within a React component, which we will cover in a later section.

JSX cannot be understood by the browser

As mentioned above, JSX is not HTML, but is composed of JavaScript functions.

In fact, writing <div>Hello React</div> in JSX is just a more convenient and understandable way of writing code like the following:

React.createElement("div", null, "Hello React!")

Both pieces of code will have the same output of "Hello React".

To write JSX and have the browser understand this different syntax, we must use a transpiler to convert JSX to these function calls.

The most common transpiler is called Babel.

React Components

What are React components?

Instead of just rendering one or another set of JSX elements, we can include them within React components.

Components are created using what looks like a normal JavaScript function, but it's different in that it returns JSX elements.

function Greeting() {
  return <div>Hello React!</div>;   
}

Why use React components?

React components allow us to create more complex logic and structures within our React application than we would with JSX elements alone.

Think of React components as our custom React elements that have their own functionality.

As we know, functions allow us to create our own functionality and reuse it where we like across our application.

Components are reusable wherever we like across our app and as many times as we like.

Components are not normal JavaScript functions

How would we render or display the returned JSX from the component above?

import React from 'react';
import ReactDOM from 'react-dom';

function Greeting() {
  return <div>Hello React!</div>;   
}

ReactDOM.render(<Greeting />, document.getElementById("root));

We use the React import to parse the JSX and ReactDOM to render our component to a root element with the id of "root."

What can React components return?

Components can return valid JSX elements, as well as strings, numbers, booleans, the value null, as well as arrays and fragments.

Why would we want to return null? It is common to return null if we want a component to display nothing.

function Greeting() {
  if (isAuthUser) {
    return "Hello again!";   
  } else {
    return null;
  }
}

Another rule is that JSX elements must be wrapped in one parent element. Multiple sibling elements cannot be returned.

If you need to return multiple elements, but don't need to add another element to the DOM (usually for a conditional), you can use a special React component called a fragment.

Fragments can be written as <></> or when you import React into your file, with <React.Fragment></React.Fragment>.

function Greeting() {
  const isAuthUser = true;  

  if (isAuthUser) {
    return (
      <>
        <h1>Hello again!</h1>
        <button>Logout</button>
      </>
    );
  } else {
    return null;
  }
}

Note that when attempting to return a number of JSX elements that are spread over multiple lines, we can return it all using a set of parentheses () as you see in the example above.

Components can return other components

The most important thing components can return is other components.

Below is a basic example of a React application contained with in a component called App that returns multiple components:

import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';
import Navbar from './components/Navbar';
import Aside from './components/Aside';
import Main from './components/Main';
import Footer from './components/Footer';

function App() {
  return (
    <Layout>
      <Navbar />
      <Main />
      <Aside />
      <Footer />
    </Layout>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

This is powerful because we are using the customization of components to describe what they are (that is, the Layout) and their function in our application. This tells us how they should be used just by looking at their name.

Additionally, we are using the power of JSX to compose these components. In other words, to use the HTML-like syntax of JSX to structure them in an immediately understandable way (like the Navbar is at the top of the app, the Footer at the bottom, and so on).

JavaScript can be used in JSX using curly braces

Just as we can use JavaScript variables within our components, we can use them directly within our JSX as well.

There are a few core rules to using dynamic values within JSX, though:

• JSX can accept any primitive values (strings, booleans, numbers), but it will not accept plain objects.
• JSX can also include expressions that resolve to these values.

For example, conditionals can be included within JSX using the ternary operator, since it resolves to a value.

function Greeting() {
  const isAuthUser = true;  

  return <div>{isAuthUser ? "Hello!" : null}</div>;
}

Props in React

Components can be passed values using props

Data passed to components in JavaScript are called props.

Props look identical to attributes on plain JSX/HTML elements, but you can access their values within the component itself.

Props are available in parameters of the component to which they are passed. Props are always included as properties of an object.

ReactDOM.render(
  <Greeting username="John!" />,
  document.getElementById("root")
);

function Greeting(props) {
  return <h1>Hello {props.username}</h1>;
}

Props cannot be directly changed

Props must never be directly changed within the child component.

Another way to say this is that props should never be mutated, since props are a plain JavaScript object

// We cannot modify the props object:
function Header(props) {
  props.username = "Doug";

  return <h1>Hello {props.username}</h1>;
}

Components are considered pure functions. That is, for every input, we should be able to expect the same output. This means we cannot mutate the props object, only read from it.

Special props: the children prop

The children prop is useful if we want to pass elements / components as props to other components

The children prop is especially useful for when you want the same component (such as a Layout component) to wrap all other components.

function Layout(props) {
  return <div className="container">{props.children}</div>;
}

function IndexPage() {
  return (
    <Layout>
      <Header />
      <Hero />
      <Footer />
    </Layout>
  );
}

function AboutPage() {
  return (
    <Layout>
      <About />
      <Footer />
    </Layout>
  );
}

The benefit of this pattern is that all styles applied to the Layout component will be shared with its child components.

Lists and Keys in React

How to iterate over arrays in JSX using map

How do we displays lists in JSX using array data? We use the .map() function to convert lists of data (arrays) into lists of elements.

const people = ["John", "Bob", "Fred"];
const peopleList = people.map((person) => <p>{person}</p>);

You can use .map() for components as well as plain JSX elements.

function App() {
  const people = ["John", "Bob", "Fred"];

  return (
    <ul>
      {people.map((person) => (
        <Person name={person} />
      ))}
    </ul>
  );
}

function Person({ name }) {
  // we access the 'name' prop directly using object destructuring
  return <p>This person's name is: {name}</p>;
}

The importance of keys in lists

Each React element within a list of elements needs a special key prop.

Keys are essential for React to be able to keep track of each element that is being iterated over with the .map() function.

React uses keys to performantly update individual elements when their data changes (instead of re-rendering the entire list).

Keys need to have unique values to be able to identify each of them according to their key value.

function App() {
  const people = [
    { id: "Ksy7py", name: "John" },
    { id: "6eAdl9", name: "Bob" },
    { id: "6eAdl9", name: "Fred" },
  ];

  return (
    <ul>
      {people.map((person) => (
        <Person key={person.id} name={person.name} />
      ))}
    </ul>
  );
}

State and Managing Data in React

What is state in React?

State is a concept that refers to how data in our application changes over time.

The significance of state in React is that it is a way to talk about our data separately from the user interface (what the user sees).

We talk about state management, because we need an effective way to keep track of and update data across our components as our user interacts with it.

To change our application from static HTML elements to a dynamic one that the user can interact with, we need state.

Examples of how to use state in React

We need to manage state often when our user wants to interact with our application.

When a user types into a form, we keep track of the form state in that component.

When we fetch data from an API to display to the user (such as posts in a blog), we need to save that data in state.

When we want to change data that a component is receiving from props, we use state to change it instead of mutating the props object.

Introduction to React hooks with useState

The way to "create" state is React within a particular component is with the useState hook.

What is a hook? It is very much like a JavaScript function, but can only be used in a React function component at the top of the component.

We use hooks to "hook into" certain features, and useState gives us the ability to create and manage state.

useState is an example of a core React hook that comes directly from the React library: React.useState.

import React from 'react';

function Greeting() {
  const state = React.useState("Hello React");  

  return <div>{state[0]}</div> // displays "Hello React"
}

How does useState work? Like a normal function, we can pass it a starting value (like "Hello React").

What is returned from useState is an array. To get access to the state variable and its value, we can use the first value in that array: state[0].

There is a way to improve how we write this, however. We can use array destructuring to get direct access to this state variable and call it what we like, such as title.

import React from 'react';

function Greeting() {
  const [title] = React.useState("Hello React");  

  return <div>{title}</div> // displays "Hello React"
}

What if we want to allow our user to update the greeting they see? If we include a form, a user can type in a new value. However, we need a way to update the initial value of our title.

import React from "react";

function Greeting() {
  const [title] = React.useState("Hello React");

  return (
    <div>
      <h1>{title}</h1>
      <input placeholder="Update title" />
    </div>
  );
}

We can do so with the help of the second element in the array that useState returns. It is a setter function, to which we can pass whatever value we want the new state to be.

In our case, we want to get the value that is typed into the input when a user is in the process of typing. We can get it with the help of React events.

What are events in React?

Events are ways to get data about a certain action that a user has performed in our app.

The most common props used to handle events are onClick (for click events), onChange (when a user types into an input), and onSubmit (when a form is submitted).

Event data is given to us by connecting a function to each of these props listed (there are many more to choose from than these three).

To get data about the event when our input is changed, we can add onChange on input and connect it to a function that will handle the event. This function will be called handleInputChange:

import React from "react";

function Greeting() {
  const [title] = React.useState("Hello React");

  function handleInputChange(event) {
    console.log("input changed!", event);
  }

  return (
    <div>
      <h1>{title}</h1>
      <input placeholder="Update title" onChange={handleInputChange} />
    </div>
  );
}

Note that in the code above, a new event will be logged to the browser's console whenever the user types into the input

Event data is provided to us as an object with many properties which are dependent upon the type of event.

How to update state in React with useState

To update state with useState, we can use the second element that useState returns to us in its array.

This element is a function that will allow us to update the value of the state variable (the first element). Whatever we pass to this setter function when we call it will be put in state.

import React from "react";

function Greeting() {
  const [title, setTitle] = React.useState("Hello React");

  function handleInputChange(event) {
    setTitle(event.target.value);
  }

  return (
    <div>
      <h1>{title}</h1>
      <input placeholder="Update title" onChange={handleInputChange} />
    </div>
  );
}

Using the code above, whatever the user types into the input (the text comes from event.target.value) will be put in state using setTitle and displayed within the h1 element.

What is special about state and why it must be managed with a dedicated hook like useState is because a state update (such as when we call setTitle) causes a re-render.

A re-render is when a certain component renders or is displayed again based off the new data. If our components weren't re-rendered when data changed, we would never see the app's appearance change at all!

What's Next

I hope you got a lot of out this guide.

If you want a copy of this cheatsheet to keep for learning purposes, you can download a complete PDF version of this cheatsheet here.

Once you have finished with this guide, there are many things you can learn to advance your skills to the next level, including:

• How to write custom React hooks
• The complete guide to React props
• How to fetch data in React from front to back
• How to build fullstack apps in React with Node
• Learn more about React state
• How to add routing to your React app with React Router
• Learn every part of React with the advanced React cheatsheet

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

Hooks are a brilliant addition to React. They simplify a lot of logic that previously had to be split up into different lifecycles with class components.

They do, however, require a different mental model, especially for first-timers.

I also recorded a short video series on this article which you may find helpful.

Debounce and throttle

There are a ton of blog posts written about debounce and throttle so I won't be diving into how to write your own debounce and throttle. For brevity, consider debounce and throttle from Lodash.

If you need a quick refresher, both accept a (callback) function and a delay in milliseconds (say x) and then both return another function with some special behavior:

• debounce: returns a function that can be called any number of times (possibly in quick successions) but will only invoke the callback after waiting for x ms from the last call.
• throttle: returns a function that can be called any number of times (possibly in quick succession) but will only invoke the callback at most once every x ms.

Usecase

We have a minimal blog editor (here's the GitHub repo) and we would like to save the blog post to the database 1 second after the user stops typing.

You may also refer to this Codesandbox if you wish to see the final version of the code.

A minimal version of our editor looks like this:

import React, { useState } from 'react';
import debounce from 'lodash.debounce';

function App() {
    const [value, setValue] = useState('');
    const [dbValue, saveToDb] = useState(''); // would be an API call normally

    const handleChange = event => {
        setValue(event.target.value);
    };

    return (
        <main>
            <h1>Blog</h1>
            <textarea value={value} onChange={handleChange} rows={5} cols={50} />
            <section className="panels">
                <div>
                    <h2>Editor (Client)</h2>
                    {value}
                </div>
                <div>
                    <h2>Saved (DB)</h2>
                    {dbValue}
                </div>
            </section>
        </main>
    );
}

Here, saveToDb would actually be an API call to the backend. To keep things simple, I'm saving it in state and then rendering as dbValue.

Since we only want to perform this save operation once user has stopped typing (after 1 second), this should be debounced.

Here's the starter code repo and branch.

Creating a debounced function

First of all, we need a debounced function that wraps the call to saveToDb:

import React, { useState } from 'react';
import debounce from 'lodash.debounce';

function App() {
    const [value, setValue] = useState('');
    const [dbValue, saveToDb] = useState(''); // would be an API call normally

    const handleChange = event => {
        const { value: nextValue } = event.target;
        setValue(nextValue);
        // highlight-starts
        const debouncedSave = debounce(() => saveToDb(nextValue), 1000);
        debouncedSave();
        // highlight-ends
    };

    return <main>{/* Same as before */}</main>;
}

But, this doesn't actually work because the function debouncedSave is created fresh on each handleChange call. This will end up debouncing each keystroke rather than debouncing the entire input value.

useCallback

useCallback is commonly used for performance optimizations when passing callbacks to child components. But we can use its constraint of memoizing a callback function to ensure the debouncedSave references the same debounced function across renders.

I also wrote this article here on freeCodeCamp if you wish to understand the basics of memoization.

This works as expected:

import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

function App() {
    const [value, setValue] = useState('');
    const [dbValue, saveToDb] = useState(''); // would be an API call normally

    // highlight-starts
    const debouncedSave = useCallback(
        debounce(nextValue => saveToDb(nextValue), 1000),
        [], // will be created only once initially
    );
    // highlight-ends

    const handleChange = event => {
        const { value: nextValue } = event.target;
        setValue(nextValue);
        // Even though handleChange is created on each render and executed
        // it references the same debouncedSave that was created initially
        debouncedSave(nextValue);
    };

    return <main>{/* Same as before */}</main>;
}

useRef

useRef gives us a mutable object whose current property refers to the passed initial value. If we don't change it manually, the value will persist for the entire lifetime of the component.

This is similar to class instance properties (i.e. defining methods and properties on this).

This also works as expected:

import React, { useState, useRef } from 'react';
import debounce from 'lodash.debounce';

function App() {
    const [value, setValue] = useState('');
    const [dbValue, saveToDb] = useState(''); // would be an API call normally

    // This remains same across renders
    // highlight-starts
    const debouncedSave = useRef(debounce(nextValue => saveToDb(nextValue), 1000))
        .current;
    // highlight-ends

    const handleChange = event => {
        const { value: nextValue } = event.target;
        setValue(nextValue);
        // Even though handleChange is created on each render and executed
        // it references the same debouncedSave that was created initially
        debouncedSave(nextValue);
    };

    return <main>{/* Same as before */}</main>;
}

Continue reading on my blog for how to abstract these concepts into custom hooks or check out the video series.

You may also follow me on Twitter to stay updated on my latest posts. I hope you found this post helpful. :)

• What are hooks?
• Why are custom hooks cool?
• What are we going to make?
• Step 0: Naming your hook
• Step 1: Setting up your project
• Step 2: Writing your new React Hook
• Step 3: Using your React hook in an example
• Step 4: Compiling your React hook and Example
• Step 5: Publishing your React hook to npm
• More resources about hooks

What are hooks?

React hooks in simple terms are functions. When you include them in your component or within another hook, they allow you to make use of React internals and parts of the React lifecycle with native hooks like useState and useEffect.

I don’t plan on doing a deep dive about hooks, but you can check out a quick introduction with an example of useState as well as the intro from the React team.

Why are custom hooks cool?

The great thing about creating custom hooks is they allow you to abstract logic for your components making it easier to reuse across multiple components in your app.

Hook diagram example for useCounter

For instance, if you wanted to create a simple counter where you use React’s state to manage the current count. Instead of having the same useState hook in each component file, you can create that logic once in a useCounter hook, making it easier to maintain, extend, and squash bugs if they come up.

What are we going to make?

For the purposes of this article, we’re going to keep it simple with a basic hook. Typically, you might use a hook because rather than a typical function, you use other native hooks that are required to be used within React function components. We’re going to stick with some basic input and output to keep things simple.

We’re going to recreate this custom Placecage hook I made, that allows you to easily generate image URLs that you can use as placeholder images.

Nic Cage excited

If you’re not familiar, Placecage is an API that allows you to generate pictures of Nic Cage as placeholder images for your website. Silly? Yes. Fun? Absolutely!

But if you’re not a fan of Nic's work, you can just as easily swap in the URL for Fill Murray which uses pictures of Bill Murray or placeholder.com which generates simple solid color background with text that shows the size of the image.

Step 0: Naming your hook

Before we jump in to our actual code, our ultimate goal is to publish this hook. If that’s not your goal, you can skip this step, but for publishing, we’ll want to create a name for our hook.

In our case, our hook name will be usePlaceCage. Now with that in mind, we have 2 formats of our name — one in camelCase format and one in snake-case format.

• camelCase: usePlaceCage
• snake-case: use-placecage

The camelCase format will be used for the actual hook function, where the snake-case name will be used for the package name and some of the folders. When creating the name, keep in mind that the package name must be unique. If a package with the same name exists on npmjs.com already, you won't be able to use it.

If you don’t already have a name, it's okay! You can just use your own name or something you can think of, it doesn’t really matter too much as really we're just trying to learn how to do this. If it were me for instance, I would use:

• camelCase: useColbysCoolHook
• snake-case: use-colbyscoolhook

But just to clarify, for the rest of our example, we’re going to stick with usePlaceCage and use-placecage.

Step 1: Setting up your project

Though you can set up your project however you’d like, we’re going to walk through building a new hook from this template I created.

The hope here, is that we can take out some of the painful bits of the process and immediately get productive with our custom hook. Don’t worry though, I’ll explain what’s going on along the way.

The requirements here are git and yarn as it helps provide tools that make it easy to scaffold this template, such as using the workspaces feature to allow easy npm scripts to manage the code from the root of the project. If either of those are a dealbreaker, you can try downloading the repo via the download link and update it as needed.

Cloning the hook template from git

To start, let’s clone the repository from Github. In the command below, you should replace use-my-custom-hook with the name of your hook, such as use-cookies or use-mooncake.

git clone https://github.com/colbyfayock/use-custom-hook use-my-custom-hook
cd use-my-custom-hook

Once you clone and navigate to that folder, you should now see 2 directories – an example directory and a use-custom-hook directory.

Cloning use-custom-hook

This will give you a few things to get started:

• A hook directory that will include the source for our hook
• Build scripts that compile our hook with babel
• An example page that imports our hook and creates a simple demo page with next.js

Running the hook setup scripts

After we successfully clone the repo, we want to run the setup scripts which install dependencies and update the hook to the name we want.

yarn install && yarn setup

Setting up a new hook from the use-custom-hook template

When the setup script runs, it will do a few things:

• It will ask you for your name – this is used to update the LICENSE and the package's author name
• It will ask you for your hook's name in 2 variations – camelCase and snake-case - this will be used to update the name of the hook throughout the template and move files with that name to the correct location
• It will reset git – it will first remove the local .git folder, which contains the history from my template and reinitialize git with a fresh commit to start your new history in
• Finally, it will remove the setup script directory and remove the package dependencies that were only being used by those scripts

Starting the development server

Once the setup scripts finish running, you'll want to run:

yarn develop

This runs a watch process on the hook source, building the hook locally each time a source file is changed, and running the example app server, where you can test the hook and make changes to the example pages.

Starting up the use-custom-hook development server

With this all ready, we can get started!

Follow along with the commit!

Step 2: Writing your new React Hook

At this point, you should now have a new custom hook where you can make it do whatever you'd like. But since we're going to walk through rebuilding the usePlaceCage hook, let's start there.

The usePlaceCage hook does 1 simple thing from a high level view – it takes in a configuration object and returns a number of image URLs that you can then use for your app.

Just as a reminder, any time I mention usePlaceCage or use-placecage, you should use the hook name that you set up before.

A little bit about placecage.com

Placecage.com is a placeholder image service that does 1 thing. It takes a URL with a simple configuration and returns an image... of Nic Cage.

placecage.com

From the simplest use, the service uses a URL pattern as follows:

https://www.placecage.com/200/300

This would return an image with a width of 200 and height of 300.

Optionally, you can pass an additional URL parameter that defines the type of image:

https://www.placecage.com/gif/200/300

In this particular instance, our type is gif, so we'll receive a gif.

The different types available to use are:

• Nothing: calm
• g: gray
• c: crazy
• gif: gif

We'll use this to define how we set up configuration for our hook.

Defining our core generator function

To get started, we're going to copy over a function at the bottom of our use-placecage/src/usePlaceCage.js file, which allows us to generate an image URL, as well as a few constant definitions that we'll use in that function.

First, let's copy over our constants to the top of our usePlaceCage.js file:

const PLACECAGE_HOST = 'https://www.placecage.com/';
const TYPES = {
  calm: null,
  gray: 'g',
  crazy: 'c',
  gif: 'gif'
};
const DEFAULT_TYPE = 'calm';
const ERROR_BASE = 'Failed to place Nick';

Here we:

• Define a host, which is the base URL of our image service.
• Define the available types, which we'll use in the configuration API. We set calm to null, because it's the default value which you get by not including it at all
• Our default type will be calm
• And we set an error base which is a consistent message when throwing an error

Then for our function, let's copy this at the bottom of our usePlaceCage.js file:

function generateCage(settings) {
  const { type = DEFAULT_TYPE, width = 200, height = 200, count = 1 } = settings;
  const config = [];

  if ( type !== DEFAULT_TYPE && TYPES[type] ) {
    config.push(TYPES[type]);
  }

  config.push(width, height);

  if ( isNaN(count) ) {
    throw new Error(`${ERROR_BASE}: Invalid count ${count}`);
  }

  return [...new Array(count)].map(() => `${PLACECAGE_HOST}${config.join('/')}`);
}

Walking through this code:

• We define a generateCage function which we'll use to generate our image URL
• We take in a settings object as an argument, which defines the configuration of our image URL. We'll be using the same parameters as we saw in our placecage.com URL
• We destructure those settings to make them available for us to use
• We have a few defaults here just to make it easier. Our default type will be defined by DEFAULT_TYPE along with a default width, height, and number of results we want to return
• We create a config array. We'll use this to append all of the different configuration objects in our URL and finally join them together with a / essentially making a URL
• Before we push our config to that array, we check if it's a valid argument, by using the TYPES object to check against it. If it's valid, we push it to our config array
• We then push our width and height
• We do some type checking, if we don't have a valid number as the count, we throw an error, otherwise we'll get incorrect results
• Finally, we return a new array with the number of results requested, mapped to a URL creator, which uses PLACECAGE_HOST as our defined base URL, and with our config array joined by /

And if we were to test this function, it would look like this:

const cage = generateCage({
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
});

console.log(cage); // ['https://www.placecage.com/gif/500/500', 'https://www.placecage.com/gif/500/500']

Using our function in the hook

So now that we have our generator function, let's actually use it in our hook!

Inside of the usePlaceCage function in the use-placecage/src/usePlaceCage.js file, we can add:

export default function usePlaceCage (settings = {}) {
  return generateCage(settings);
}

What this does it uses our generator function, takes in the settings that were passed into the hook, and returns that value from the hook.

Similar to our previous use example, if we were to use our hook, it would look like this:

const cage = usePlaceCage({
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
});

console.log(cage); // ['https://www.placecage.com/gif/500/500', 'https://www.placecage.com/gif/500/500']

At this point, it does the same thing!

So now we have our hook, it serves as a function to generate image URLs for the placecage.com service. How can we actually use it?

Follow along with the commit!

Step 3: Using your React hook in an example

The good news about our template, is it already includes an example app that we can update to easily make use of our hook to both test and provide documentation for those who want to use it.

Setting up the hook

To get started, let's open up our example/pages/index.js file. Inside of this file you'll see the following:

const hookSettings = {
  message: 'Hello, custom hook!'
}

const { message } = usePlaceCage(hookSettings);

This snippet is what was used by default in the template just for a proof of concept, so let's update that. We're going to use the same exact configuration as we did in Step 2:

const hookSettings = {
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
}

const cage = usePlaceCage(hookSettings);

Again, we set up our settings object with the configuration for our hook and invoke our hook and set the value to the cage constant.

If we now console log that value our to our dev tools, we can see it working!

console.log('cage', cage);

Using console.log to show the cage value

Note: If you get an error here about message, you can comment that our or remove it under the Examples section.

Updating the example with our new hook configuration

If you scroll down to the Examples section, you'll notice that we have the same default hookSettings as above, so let's update that again to make sure our example is accurate.

{`const hookSettings = {
  type: 'gif',
  width: 500,
  height: 500,
  count: 2
}

const cage = usePlaceCage(hookSettings);`}

You'll also notice that we're no longer using the message variable. If you didn't remove it in the last step, we can now replace it under the Output heading with:

<p>
  { JSON.stringify(cage) }
</p>
<p>
  { cage.map((img, i) => <img key={`img-${i}`} width={200} src={img} />)}
</p>

We're doing 2 things here:

• Instead of showing the variable itself, we wrap it with JSON.stringify so that we can show the contents of the array
• We also use the map function to loop over our image URLs in the cage constant and create a new image element for each. This let's us preview the output instead of just seeing the values

And once you save and open your browser, you should now see your updated examples and output!

Custom hook example page

Other things you can do on that page

Before moving on, you can also update a few other things that will be important for your hooks page:

• Update the How to use section with instructions
• Add additional examples to make it easier for people to know what to do

A few things are also automatically pulled in from the use-placecage/package.json file. You can either update them there to make it easier to maintain or you can replace them in the example page:

• name: Is used at the <h1> of the page
• description: Is used at the description under the <h1>
• repository.url: Used to include a link to the repository
• author: The name and url are used to include a link at the bottom of the page

Follow along with the commit!

Step 4: Compiling your React hook and Example

The way we can make our hook work easily as an npm module is to compile it for others to use. We're using babel to do this.

Though the publish process already does this for us automatically with the prepublishOnly script in use-placecage/package.json, we can manually compile our hook using the yarn build command from the root of the project.

Along with compiling the hook, running yarn build will also compile the example page, allowing you to upload it wherever you'd like. After running that command, you should see an output of static HTML files in the example/out directory.

If you're looking for a recommendation, Netlify makes it easy to connect your Github account and deploy the static site.

Deployment setup in Netlify

See the demo site deployed to Netlify!

Step 5: Publishing your React hook to npm

Finally, if you're happy with your hook, it's time to publish!

npm makes this part really easy. The only prerequisite you need to have an npm account. With that account, let's log in:

npm login

Which will prompt you for your login credentials.

Next, let's navigate to our hook's directory, as our package configuration is there under use-placecage/package.json:

cd use-placecage

Then, we can simply publish!

npm publish

Keep in mind, that each package name needs to be unique. If you used use-placecage, it's already taken... by me. ?

But if you're successful, npm should build your hook and upload it to the package registry!

Publishing an npm package

It will then be available on npm with the following pattern:

https://www.npmjs.com/package/[package-name]

So for use-placeage, it's available here: https://www.npmjs.com/package/use-placecage

We now have a custom hook!

Yay ? if you followed along, you should now have created a custom hook and published it to npm.

Though this was a silly example using placecage.com, it gives us a good idea of how we can easily set this up.

You'll also notice that this specific example wasn't the best use case for a hooks, where we could have simply used a function. Typically, we'll want to use custom hooks to wrap functionality that can only live inside a React component, such as useState. To learn more about that, you can read one of my other articles about custom hooks.

However, this gave us a good basis to talk through the creation and configuration of our new hook!

More resources about hooks

• How to destructure the fundamentals of React Hooks (freecodecamp.org)
• Introducing Hooks (reactjs.org)
• Hooks API Reference (reactjs.org)

Modern front-end frameworks move the application from state to state. Data fuels these updates. These technologies interact with the data which in turn transitions the state. With every state change, there are many specific moments where certain assets become available.

At one instance the template might be ready, in another data will have finished uploading. Coding for each instance requires a means of detection. Lifecycle hooks answer this need. Modern front-end frameworks package themselves with a variety of lifecycle hooks. Angular is no exception

Lifecycle Hooks Explained

Lifecycle hooks are timed methods. They differ in when and why they execute. Change detection triggers these methods. They execute depending on the conditions of the current cycle. Angular runs change detection constantly on its data. Lifecycle hooks help manage its effects.

An important aspect of these hooks is their order of execution. It never deviates. They execute based on a predictable series of load events produced from a detection cycle. This makes them predictable.

Some assets are only available after a certain hook executes. Of course, a hook only execute under certain conditions set in the current change detection cycle.

This article presents the lifecycle hooks in order of their execution (if they all execute). Certain conditions merit a hook’s activation. There are a few who only execute once after component initialization.

All lifecycle methods are available from @angular/core. Although not required, Angular recommends implementing every hook. This practice leads to better error messages regarding the component.

Order of Lifecycle Hooks' Execution

ngOnChanges

ngOnChanges triggers following the modification of @Input bound class members. Data bound by the @Input() decorator come from an external source. When the external source alters that data in a detectable manner, it passes through the @Input property again.

With this update, ngOnChanges immediately fires. It also fires upon initialization of input data. The hook receives one optional parameter of type SimpleChanges. This value contains information on the changed input-bound properties.

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
  <h3>Child Component</h3>
  <p>TICKS: {{ lifecycleTicks }}</p>
  <p>DATA: {{ data }}</p>
  `
})
export class ChildComponent implements OnChanges {
  @Input() data: string;
  lifecycleTicks: number = 0;

  ngOnChanges() {
    this.lifecycleTicks++;
  }
}

@Component({
  selector: 'app-parent',
  template: `
  <h1>ngOnChanges Example</h1>
  <app-child [data]="arbitraryData"></app-child>
  `
})
export class ParentComponent {
  arbitraryData: string = 'initial';

  constructor() {
    setTimeout(() => {
      this.arbitraryData = 'final';
    }, 5000);
  }
}

Summary: ParentComponent binds input data to the ChildComponent. The component receives this data through its @Input property. ngOnChanges fires. After five seconds, the setTimeout callback triggers. ParentComponent mutates the data source of ChildComponent’s input-bound property. The new data flows through the input property. ngOnChanges fires yet again.

ngOnInit

ngOnInit fires once upon initialization of a component’s input-bound (@Input) properties. The next example will look similar to the last one. The hook does not fire as ChildComponent receives the input data. Rather, it fires right after the data renders to the ChildComponent template.

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
  <h3>Child Component</h3>
  <p>TICKS: {{ lifecycleTicks }}</p>
  <p>DATA: {{ data }}</p>
  `
})
export class ChildComponent implements OnInit {
  @Input() data: string;
  lifecycleTicks: number = 0;

  ngOnInit() {
    this.lifecycleTicks++;
  }
}

@Component({
  selector: 'app-parent',
  template: `
  <h1>ngOnInit Example</h1>
  <app-child [data]="arbitraryData"></app-child>
  `
})
export class ParentComponent {
  arbitraryData: string = 'initial';

  constructor() {
    setTimeout(() => {
      this.arbitraryData = 'final';
    }, 5000);
  }
}

Summary: ParentComponent binds input data to the ChildComponent. ChildComponent receives this data through its @Input property. The data renders to the template. ngOnInit fires. After five seconds, the setTimeout callback triggers. ParentComponent mutates the data source of ChildComponent’s input-bound property. ngOnInit DOES NOT FIRE.

ngOnInit is a one-and-done hook. Initialization is its only concern.

ngDoCheck

ngDoCheck fires with every change detection cycle. Angular runs change detection frequently. Performing any action will cause it to cycle. ngDoCheck fires with these cycles. Use it with caution. It can create performance issues when implemented incorrectly.

ngDoCheck lets developers check their data manually. They can trigger a new application date conditionally. In conjunction with ChangeDetectorRef, developers can create their own checks for change detection.

import { Component, DoCheck, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
  <h1>ngDoCheck Example</h1>
  <p>DATA: {{ data[data.length - 1] }}</p>
  `
})
export class ExampleComponent implements DoCheck {
  lifecycleTicks: number = 0;
  oldTheData: string;
  data: string[] = ['initial'];

  constructor(private changeDetector: ChangeDetectorRef) {
    this.changeDetector.detach(); // lets the class perform its own change detection

    setTimeout(() => {
      this.oldTheData = 'final'; // intentional error
      this.data.push('intermediate');
    }, 3000);

    setTimeout(() => {
      this.data.push('final');
      this.changeDetector.markForCheck();
    }, 6000);
  }

  ngDoCheck() {
    console.log(++this.lifecycleTicks);

    if (this.data[this.data.length - 1] !== this.oldTheData) {
      this.changeDetector.detectChanges();
    }
  }
}

Pay attention to the console versus the display. The data progress up to ‘intermediate’ before freezing. Three rounds of change detection occur over this period as indicated in the console. One more round of change detection occurs as ‘final’ gets pushed to the end of this.data. One last round of change detection then occurs. The evaluation of the if statement determines no updates to the view are necessary.

Summary: Class instantiates after two rounds of change detection. Class constructor initiates setTimeout twice. After three seconds, the first setTimeout triggers change detection. ngDoCheck marks the display for an update. Three seconds later, the second setTimeout triggers change detection. No view updates needed according to the evaluation of ngDoCheck.

Warning

Before proceeding, learn the difference between the content DOM and view DOM (DOM stands for Document Object Model).

The content DOM defines the innerHTML of directive elements. Conversely, the view DOM is a component’s template excluding any template HTML nested within a directive. For a better understanding, refer to this blog post.

ngAfterContentInit

ngAfterContentInit fires after the component’s content DOM initializes (loads for the first time). Waiting on @ContentChild(ren) queries is the hook’s primary use-case.

@ContentChild(ren) queries yield element references for the content DOM. As such, they are not available until after the content DOM loads. Hence why ngAfterContentInit and its counterpart ngAfterContentChecked are used.

import { Component, ContentChild, AfterContentInit, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  <p>I am C.</p>
  <p>Hello World!</p>
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  <p>I am B.</p>
  <ng-content></ng-content>
  `
})
export class BComponent implements AfterContentInit {
  @ContentChild("BHeader", { read: ElementRef }) hRef: ElementRef;
  @ContentChild(CComponent, { read: ElementRef }) cRef: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterContentInit() {
    this.renderer.setStyle(this.hRef.nativeElement, 'background-color', 'yellow')

    this.renderer.setStyle(this.cRef.nativeElement.children.item(0), 'background-color', 'pink');
    this.renderer.setStyle(this.cRef.nativeElement.children.item(1), 'background-color', 'red');
  }
}

@Component({
  selector: 'app-a',
  template: `
  <h1>ngAfterContentInit Example</h1>
  <p>I am A.</p>
  <app-b>
    <h3 #BHeader>BComponent Content DOM</h3>
    <app-c></app-c>
  </app-b>
  `
})
export class AComponent { }

The @ContentChild query results are available from ngAfterContentInit. Renderer2 updates the content DOM of BComponent containing a h3 tag and CComponent. This is a common example of content projection.

Summary: Rendering starts with AComponent. For it to finish, AComponent must render BComponent. BComponent projects content nested in its element through the <ng-content></ng-content> element. CComponent is part of the projected content. The projected content finishes rendering. ngAfterContentInit fires. BComponent finishes rendering. AComponent finishes rendering. ngAfterContentInit will not fire again.

ngAfterContentChecked

ngAfterContentChecked fires after every cycle of change detection targeting the content DOM. This lets developers facilitate how the content DOM reacts to change detection. ngAfterContentChecked can fire frequently and cause performance issues if poorly implemented.

ngAfterContentChecked fires during a component’s initialization stages too. It comes right after ngAfterContentInit.

import { Component, ContentChild, AfterContentChecked, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  <p>I am C.</p>
  <p>Hello World!</p>
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  <p>I am B.</p>
  <button (click)="$event">CLICK</button>
  <ng-content></ng-content>
  `
})
export class BComponent implements AfterContentChecked {
  @ContentChild("BHeader", { read: ElementRef }) hRef: ElementRef;
  @ContentChild(CComponent, { read: ElementRef }) cRef: ElementRef;

  constructor(private renderer: Renderer2) { }

  randomRGB(): string {
    return `rgb(${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)})`;
  }

  ngAfterContentChecked() {
    this.renderer.setStyle(this.hRef.nativeElement, 'background-color', this.randomRGB());
    this.renderer.setStyle(this.cRef.nativeElement.children.item(0), 'background-color', this.randomRGB());
    this.renderer.setStyle(this.cRef.nativeElement.children.item(1), 'background-color', this.randomRGB());
  }
}

@Component({
  selector: 'app-a',
  template: `
  <h1>ngAfterContentChecked Example</h1>
  <p>I am A.</p>
  <app-b>
    <h3 #BHeader>BComponent Content DOM</h3>
    <app-c></app-c>
  </app-b>
  `
})
export class AComponent { }

This hardly differs from ngAfterContentInit. A mere <button></button> was added to BComponent. Clicking it causes a change detection loop. This activates the hook as indicated by the randomization of background-color.

Summary: Rendering starts with AComponent. For it to finish, AComponent must render BComponent. BComponent projects content nested in its element through the <ng-content></ng-content> element. CComponent is part of the projected content. The projected content finishes rendering. ngAfterContentChecked fires. BComponent finishes rendering. AComponent finishes rendering. ngAfterContentChecked may fire again through change detection.

ngAfterViewInit

ngAfterViewInit fires once after the view DOM finishes initializing. The view always loads right after the content. ngAfterViewInit waits on @ViewChild(ren) queries to resolve. These elements are queried from within the same view of the component.

In the example below, BComponent’s h3 header is queried. ngAfterViewInit executes as soon as the query’s results are available.

import { Component, ViewChild, AfterViewInit, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  <p>I am C.</p>
  <p>Hello World!</p>
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  <p #BStatement>I am B.</p>
  <ng-content></ng-content>
  `
})
export class BComponent implements AfterViewInit {
  @ViewChild("BStatement", { read: ElementRef }) pStmt: ElementRef;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    this.renderer.setStyle(this.pStmt.nativeElement, 'background-color', 'yellow');
  }
}

@Component({
  selector: 'app-a',
  template: `
  <h1>ngAfterViewInit Example</h1>
  <p>I am A.</p>
  <app-b>
    <h3>BComponent Content DOM</h3>
    <app-c></app-c>
  </app-b>
  `
})
export class AComponent { }

Renderer2 changes the background color of BComponent’s header. This indicates the view element was successfully queried thanks to ngAfterViewInit.

Summary: Rendering starts with AComponent. For it to finish, AComponent must render BComponent. BComponent projects content nested in its element through the <ng-content></ng-content> element. CComponent is part of the projected content. The projected content finishes rendering. BComponent finishes rendering. ngAfterViewInit fires. AComponent finishes rendering. ngAfterViewInit will not fire again.

ngAfterViewChecked

ngAfterViewChecked fires after any change detection cycle targeting the component’s view. The ngAfterViewChecked hook lets developers facilitate how change detection affects the view DOM.

import { Component, ViewChild, AfterViewChecked, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-c',
  template: `
  <p>I am C.</p>
  <p>Hello World!</p>
  `
})
export class CComponent { }

@Component({
  selector: 'app-b',
  template: `
  <p #BStatement>I am B.</p>
  <button (click)="$event">CLICK</button>
  <ng-content></ng-content>
  `
})
export class BComponent implements AfterViewChecked {
  @ViewChild("BStatement", { read: ElementRef }) pStmt: ElementRef;

  constructor(private renderer: Renderer2) { }

  randomRGB(): string {
    return `rgb(${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)},
    ${Math.floor(Math.random() * 256)})`;
  }

  ngAfterViewChecked() {
    this.renderer.setStyle(this.pStmt.nativeElement, 'background-color', this.randomRGB());
  }
}

@Component({
  selector: 'app-a',
  template: `
  <h1>ngAfterViewChecked Example</h1>
  <p>I am A.</p>
  <app-b>
    <h3>BComponent Content DOM</h3>
    <app-c></app-c>
  </app-b>
  `
})
export class AComponent { }

Summary: Rendering starts with AComponent. For it to finish, AComponent must render BComponent. BComponent projects content nested in its element through the <ng-content></ng-content> element. CComponent is part of the projected content. The projected content finishes rendering. BComponent finishes rendering. ngAfterViewChecked fires. AComponent finishes rendering. ngAfterViewChecked may fire again through change detection.

Clicking the <button></button> element initiates a round of change detection. ngAfterContentChecked fires and randomizes the background-color of the queried elements each button click.

ngOnDestroy

ngOnDestroy fires upon a component’s removal from the view and subsequent DOM. This hook provides a chance to clean up any loose ends before a component’s deletion.

import { Directive, Component, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appDestroyListener]'
})
export class DestroyListenerDirective implements OnDestroy {
  ngOnDestroy() {
    console.log("Goodbye World!");
  }
}

@Component({
  selector: 'app-example',
  template: `
  <h1>ngOnDestroy Example</h1>
  <button (click)="toggleDestroy()">TOGGLE DESTROY</button>
  <p appDestroyListener *ngIf="destroy">I can be destroyed!</p>
  `
})
export class ExampleComponent {
  destroy: boolean = true;

  toggleDestroy() {
    this.destroy = !this.destroy;
  }
}

Summary: The button is clicked. ExampleComponent’s destroy member toggles false. The structural directive *ngIf evaluates to false. ngOnDestroy fires. *ngIf removes its host <p></p>. This process repeats any number of times clicking the button to toggle destroy to false.

Conclusion

Remember that certain conditions must be met for each hook. They will always execute in order of each other regardless. This makes hooks predictable enough to work with even if some do not execute.

With lifecycle hooks, timing the execution of a class is easy. They let developers track where change detection is occurring and how the application should react. They stall for code that requires load-based dependencies available only after sometime.

The component lifecycle characterizes modern front end frameworks. Angular lays out its lifecycle by providing the aforementioned hooks.

Sources

• Angular Team. “Lifecycle Hooks”. Google. Accessed 2 June 2018
• Gechev, Minko. “ViewChildren and ContentChildren in Angular”. Accessed 2 June 2018

Resources

• Angular Documentation
• Angular GitHub Repository
• Lifecycle Hooks in Depth

Early this year, the React team released a new addition, hooks, to React in version 16.8.0.

If React were a big bowl of candies, then hooks are the latest additions, very chewy candies with great taste!

So, what exactly do hooks mean? And why are they worth your time?

Introduction

One of the main reasons hooks were added to React is to offer a more powerful and expressive way to write (and share) functionality between components.

In the longer term, we expect Hooks to be the primary way people write React components — React Team

If hooks are going to be that important, why not learn about them in a fun way!

The Candy Bowl

Consider React to be a beautiful bowl of candy.

The bowl of candy has been incredibly helpful to people around the world.

The people who made this bowl of candy realized that some of the candies in the bowl weren’t doing people much good.

A couple of the candies tasted great, yes! But they brought about some complexity when people ate them — think render props and higher order components?

So, what did they do?

They did the right thing — not throwing away all the previous candies, but making new sets of candies.

These candies were called Hooks.

These candies exist for one purpose: to make it easier for you to do the things you were already doing.

These candies aren’t super special. In fact, as you begin to eat them you’ll realize they taste familiar — they are just Javascript functions!

As with all good candies, these 10 new candies all have their unique names. Though they are collectively called hooks.

Their names always begin with the three letter word, use … e.g. useState, useEffect etc.

Just like chocolate, these 10 candies all share some of the same ingredients. Knowing how one tastes, helps you relate to the other.

Sounds fun? Now let’s have these candies.

The State Hook

As stated earlier, hooks are functions. Officially, there are 10 of them. 10 new functions that exist to make writing and sharing functionalities in your components a lot more expressive.

The first hook we’ll take a look at is called, useState.

For a long time, you couldn’t use the local state in a functional component. Well, not until hooks.

With useState, your functional component can have (and update) local state.

How interesting.

Consider the following counter application:

With the Counter component shown below:

Simple, huh?

Let me ask you one simple question. Why exactly do we have this component as a Class component?

Well, the answer is simply because we need to keep track of some local state within the component.

Now, here’s the same component refactored to a functional component with access to state via the useState hooks.

Class to Hooks — wait for the animation.

What’s different?

I’ll walk you through it step by step.

A functional component doesn’t have all the Class extend ... syntax.

function CounterHooks() {  }

It also doesn’t require a render method.

function CounterHooks() {    return (      <div>        <h3 className="center">Welcome to the Counter of Life </h3>        <button           className="center-block"           onClick={this.handleClick}> {count} </button>      </div>    ); }

There are two concerns with the code above.

1. You’re not supposed to use the this keyword in function components.
2. The count state variable hasn’t been defined.

Extract handleClick to a separate function within the functional component:

function CounterHooks() {  const handleClick = () => {      }  return (      <div>        <h3 className="center">Welcome to the Counter of Life </h3>        <button           className="center-block"           onClick={handleClick}> {count} </button>      </div>    ); }

Before the refactor, the count variable came from the class component’s state object.

In functional components, and with hooks, that comes from invoking the useState function or hook.

useState is called with one argument, the initial state value e.g. useState(0) where 0 represents the initial state value to be kept track of.

Invoking this function returns an array with two values.

//? returns an array with 2 values. useState(0)

The first value being the current state value being tracked, and second, a function to update the state value.

Think of this as some state and setState replica - however, they aren’t quite the same.

With this new knowledge, here’s useState in action.

function CounterHooks() {  // ?   const [count, setCount] = useState(0);  const handleClick = () => {    setCount(count + 1)  }  return (      <div>        <h3 className="center">Welcome to the Counter of Life </h3>        <button           className="center-block"           onClick={handleClick}> {count} </button>      </div>    ); }

There are a few things to note here, apart from the obvious simplicity of the code!

One, since invoking useState returns an array of values, the values could be easily destructed into separate values as shown below:

const [count, setCount] = useState(0);

Also, note how the handleClick function in the refactored code doesn’t need any reference to prevState or anything like that.

It just calls setCount with the new value count + 1.

  const handleClick = () => {    setCount(count + 1) }

This is because of the correct value of the count state variable will always be kept across re-renders.

So, need to update count state variable, just call setCount with the new value e.g. setCount(count + 1)

Simple as it sounds, you’ve built your very first component using hooks. I know it’s a contrived example, but that’s a good start!

Nb: it’s also possible to pass a function to the state updater function. This is usually recommended as with class’ setState when a state update depends on a previous value of state e.g. setCount(prevCount => prevCount + 1)

Multiple useState calls

With class components, we all got used to set state values in an object whether they contained a single property or more.

// single property state = {  count: 0}// multiple properties state = { count: 0, time: '07:00'}

With useState you may have noticed a subtle difference.

In the example above, we only called useState with the actual initial value. Not an object to hold the value.

useState(0)

So, what if we wanted to another state value?

Can multiple useState calls be used?

Consider the component below. Same as before but this time it tracks time of click.

As you can see, the hooks usage is quite the same, except for having a new useState call.

const [time, setTime] = useState(new Date())

Now time is used in the rendered JSX to retrieve the hour, minute and second of the click.

<p className="center">    at: { `${time.getHours()} : ${time.getMinutes()} : ${time.getSeconds()}`}</p>

Great!

However, is it possible to use an object with useState as opposed to multiple useState calls?

Absolutely!

If you choose to do this, you should note that unlike setState calls, the values passed into useState replaces the state value. setState merges object properties but useState replaces the entire value.

The Effect Hook

With class components you’ve likely performed side effects such as logging, fetching data or managing subscriptions.

These side effects may be called “effects” for short, and the effect hook, useEffect was created for this purpose.

How’s it used?

Well, the useEffect hook is called by passing it a function within which you can perform your side effects.

Here’s a quick example.

useEffect(() => {  // ? you can perform side effects here  console.log("useEffect first timer here.")})

To useEffect I’ve passed an anonymous function with some side effect called within it.

The next logical question is, when is the useEffect function called?

Well, remember that in class components you had lifecycle methods such as componentDidMount and componentDidUpdate.

Since functional components don’t have these lifecycle methods, useEffect kinda takes their place.

Thus, in the example above, the function within useEffect also known as the effect function, will be invoked when the functional component mounts (componentDidMount) and when the component updates componentDidUpdate).

Here’s that in action.

By adding the useEffect call above to the counter app, here’s the behavior we get.

NB: The useEffect hook isn’t entirely the same as componentDidMount + componentDidUpdate. It can be viewed as such, but the implementation differs with some subtle differences.

It’s interesting that the effect function was invoked every time there was an update. That’s great, but it’s not always the desired functionality.

What if you only want to run the effect function only when the component mounts?

That’s a common use case and useEffect takes a second parameter, an array of dependencies to handle this.

If you pass in an empty array, the effect function is run only on mount — subsequent re-renders don’t trigger the effect function.

useEffect(() => {    console.log("useEffect first timer here.")}, [])

If you pass any values into this array, then the effect function will be run on mount, and anytime the values passed are updated. i.e if any of the values are changed, the effected call will re-run.

useEffect(() => {    console.log("useEffect first timer here.")}, [count])

The effect function will be run on mount, and whenever the count function changes.

count changes when the button is clicked, so the effect function re-runs

What about subscriptions?

It’s common to subscribe and unsubscribe from certain effects in certain apps.

Consider the following:

useEffect(() => {  const clicked = () => console.log('window clicked');  window.addEventListener('click', clicked);}, [])

In the effect above, upon mounting, a click event listener is attached to the window.

How do we unsubscribe from this listener when the component is unmounted?

Well, useEffect allows for this.

If you return a function within your effect function, it will be invoked when the component unmounts. This is the perfect place to cancel subscriptions as shown below:

useEffect(() => {    const clicked = () => console.log('window clicked');    window.addEventListener('click', clicked);    return () => {      window.removeEventListener('click', clicked)    } }, [])

There’s a lot more you can do with the useEffect hook such as making API calls.

Build Your own Hooks

From the start of this article we’ve taken (and used) candies from the candy box React provides.

However, React also provides a way for you to make your own unique candies — called custom hooks.

So, how does that work?

A custom hook is just a regular function. However, its name must begin with the word, use and if needed, it may call any of the React hooks within itself.

Below’s an example:

The Rules of Hooks

There are two rules to adhere to while using hooks.

1. Only Call Hooks at the Top Level i.e. not within conditionals, loops or nested functions.
2. Only Call Hooks from React Functions i.e. Functional Components and Custom Hooks.

This ESLint plugin is great to ensure you adhere to these rules within your projects.

Other Candies

We have considered a few of the hooks React provides, but there’s more!

This introduction should have prepared you to take on the perhaps more dense documentation. Also checkout my live editable react hooks cheatsheet.

Getting Started with React Hooks

The React team introduced React Hooks to the world at React Conf in late October 2018. In early February 2019, they finally came in React v16.8.0. While I, like most others probably, won’t be able to use them in production for a while (until we decide to update React), I have been experimenting with them on the side.

I was actually so excited about it, I will be giving an intro talk about it at a local meetup. Additionally, I’ll be giving a talk about Hooks (and other upcoming React features) at WeRockITConf in Huntsville in May! (EDIT: I have now given these talks and you can find the presentations and the associated resources on my website!) But for now, here’s how to get started with React Hooks!

What are Hooks anyway?

React Hooks let you use state, and other React features without having to define a JavaScript class. It’s like being able to take advantage of the cleanliness and simplicity of a Pure Component and state and component lifecycle methods. This is because Hooks are just regular JavaScript functions! This lends itself to cleaner and less clunky code. A side by side comparison of what the code looks like with and without Hooks for a simple counting component:

import './App.css';
import React, { useState } from 'react';

const HooksExample = () => {
    const [counter, setCount] = useState(0);

    return (
        <div className="App">
            <header className="App-header">
                The button is pressed: { counter } times.
                <button
                    onClick={() => setCount(counter + 1)}
                    style={{ padding: '1em 2em', margin: 10 }}
                >
                    Click me!
                </button>
            </header>
        </div>
    )
}

export default HooksExample;

NoHooks.js:

import './App.css';
import React, { Component } from 'react';

export class NoHooks extends Component {
    constructor(props) {
        super(props;
        this.state = {
            counter: 0
        }
    }

    render() {
        const { counter } = this.state;
        return (
            <div className="App">
                <header className="App-header">
                    The button is pressed: { counter } times.
                    <button
                        onClick={() => this.setState({ counter: counter + 1 }) }
                        style={{ padding: '1em 2em', margin: 10 }}
                    >
                        Click me!
                    </button>
                </header>
            </div>
        )    
    }
}

export default NoHooks;

Not only is the code a lot smaller — the saved space certainly adds up for larger components — it’s also a lot more readable, which is a huge advantage of Hooks. For beginners who are just getting started with React, it’s easier for them to read the first block of code and easily see exactly what’s happening. With the second block, we have some extraneous elements, and it’s enough to make you stop and wonder what it’s for.

Another great thing about hooks is that you can create your own! This means that a lot of the stateful logic we used to have to re-write from component to component, we can now abstract out to a custom hook — and reuse it.

The one example where this is particularly life-changing (for me) that comes to mind is use with forms. With all of the stateful logic of forms, it’s hard to reduce the size of the component. But now, with hooks, complex forms can become much simpler without the use of other form libraries.

But before we get to that, let’s take a look at the hook at hand — useState.

useState

useState, as the name describes, is a hook that allows you to use state in your function. We define it as follows:

const [ someState, updateState ] = useState(initialState)

Let’s break this down:

• someState: lets you access the current state variable, someState
• updateState: function that allows you to update the state — whatever you pass into it becomes the new someState
• initialState: what you want someState to be upon initial render

(If you’re unfamiliar with array destructuring syntax, stop here and read this.)

Now that we understand the basic format of useState and how to call and use it, let’s go back to the example from before.

In this example, counter is the state variable, setCount is the updater function, and 0 is the initial state. We use setCount(counter + 1) to increment the count when the button is pressed, making counter + 1 the new value of counter. Alternatively, if we wanted to use the previous state to update the current state, we could pass in the old state to setCount:

setCount(prevCount => prevCount + 1)

This is a simple example that isn’t reflective of what we’d normally use in an actual application. But let’s take a look at something we’re more likely to use — a simple sign-in form for email and password:

import './App.css';
import React, { useState } from 'react';

const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    return (
        const { handleSubmit } = this.props;
        <div className="App">
            <header className="App-header">
                <form onSubmit={handleSubmit}>
                    <input value={ email } onChange={(e) => setEmail(e.target.value) } />
                    <input value={ password } onChange={(e) => setPassword(e.target.value) } />
                    <button type="submit">Submit</button>
                </form>
            </header>
        </div>
    )
}

export default LoginForm;

We have two separate state fields and state updaters. This allows us to create really simple forms without creating a whole JavaScript class.

If we wanted to simplify this further, we could create an object as the state. However, useState replaces the whole state instead of updating the object (as setState would), so we can replicate the usual behavior of setState as shown below:

import './App.css';
import React, { useState } from 'react';

const LoginForm = () => {
    const [login, setLogin] = useState({ email: '', password: '' });

    return (
        const { handleSubmit } = this.props;
        <div className="App">
            <header className="App-header">
                <form onSubmit={handleSubmit}>
                    <input value={ login.email } onChange={(e) => setLogin(prevState => { ...prevState, email: e.target.value }) } />
                    <input value={ login.password } onChange={(e) => setLogin(prevState => { ...prevState, password: e.target.value }) } />
                    <button type="submit">Submit</button>
                </form>
            </header>
        </div>
    )
}

export default LoginForm;

If you have state objects more complex than this, you would either want to break them out into separate states as in the first Login example, or use useReducer (we’ll get to that soon!).

So we’ve got state in hooks. What about component lifecycle methods?

useEffect

useEffect is another hook that handles componentDidUpdate, componentDidMount, and componentWillUnmount all in one call. If you need to fetch data, for example, you could useEffect to do so, as seen below.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';

const HooksExample = () => {
    const [data, setData] = useState();

    useEffect(() => {
        const fetchGithubData = async (name) => {
            const result = await axios(`https://api.github.com/users/${name}/events`)
            setData(result.data)
        }
        fetchGithubData('lsurasani')
    }, [data])



    return (
        <div className="App">
            <header className="App-header">
                {data && (
                    data.map(item => <p>{item.repo.name}</p>)
                )}
            </header>
        </div>
    )
}

export default HooksExample;

Taking a look at useEffect we see:

• First argument: A function. Inside of it, we fetch our data using an async function and then set data when we get results.
• Second argument: An array containing data. This defines when the component updates. As I mentioned before, useEffect runs when componentDidMount, componentWillUnmount, _and_componentDidUpdate would normally run. Inside the first argument, we’ve set some state, which would traditionally cause componentDidUpdate to run. As a result, useEffect would run again if we did not have this array. Now, useEffect will run on componentDidMount, componentWillUnmount, and if data was updated, componentDidUpdate. This argument can be empty— you can choose to pass in an empty array. In this case, only componentDidMount and componentWillUnmount will ever fire. But, you do have to specify this argument if you set some state inside of it.

useReducer

For those of you who use Redux, useReducer will probably be familiar. useReducer takes in two arguments — a reducer and an initial state. A reducer is a function that you can define that takes in the current state and an “action”. The action has a type, and the reducer uses a switch statement to determine which block to execute based on the type. When it finds the correct block, it returns the state but with the modifications you define depending on the type. We can pass this reducer into useReducer, and then use this hook like this:

const [ state, dispatch ] = useReducer(reducer, initialState)

You use dispatch to say what action types you want to execute, like this:

dispatch({ type: name})

useReducer is normally used when you have to manage complex states — such as the signup form below.

import React, { useReducer } from 'react';

const reducer = (state, action) => {
    switch (action.type) {
        case 'firstName': {
            return { ...state, firstName: action.value };
            }
        case 'lastName': {
            return { ...state, lastName: action.value };
            }
        case 'email': {
            return { ...state, email: action.value };
            }
        case 'password': {
            return { ...state, password: action.value };
            }
        case 'confirmPassword': {
            return { ...state, confirmPassword: action.value };
            }
        default: {
            return state;
        }
    }
};

function SignupForm() {
    const initialState = {
        firstName: '',
        lastName: '',
        email: '',
        password: '',
        confirmPassword: '',
    }
    const [formElements, dispatch] = useReducer(reducer, initialState);

    return (
        <div className="App">
            <header className="App-header">
                <div>
                    <input placeholder="First Name" value={ formElements.firstName} onChange={(e) => dispatch({ type: firstName, value: e.target.value }) } />
                    <input placeholder="Last Name" value={ formElements.lastName} onChange={(e) => dispatch({ type: lastName, value: e.target.value }) } />
                    <input placeholder="Email" value={ formElements.email} onChange={(e) => dispatch({ type: email, value: e.target.value }) } />
                    <input placeholder="Password" value={ formElements.password} onChange={(e) => dispatch({ type: password, value: e.target.value }) } />
                    <input placeholder="Confirm Password" value={ formElements.confirmPassword} onChange={(e) => dispatch({ type: confirmPassword, value: e.target.value }) } />
                </div>
            </header>
        </div>
    );
}

export default SignupForm;

This hook has a lot of additional applications, including allowing us to specify a few reducers throughout our application and then reusing them for each of our components, changing based on what happens in those components. On a high level, this is similar to Redux’s functionality — so we may be able to avoid using Redux for relatively simpler applications.

Custom Hooks

So we’ve covered 3 basic hooks — let’s look at how to make our own. Remember the example I mentioned earlier with the login form? Here it is again as a reminder:

import './App.css';
import React, { useState } from 'react';

const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    return (
        const { handleSubmit } = this.props;
        <div className="App">
            <header className="App-header">
                <form onSubmit={handleSubmit}>
                    <input value={ email } onChange={(e) => setEmail(e.target.value) } />
                    <input value={ password } onChange={(e) => setPassword(e.target.value) } />
                    <button type="submit">Submit</button>
                </form>
            </header>
        </div>
    )
}

export default LoginForm;

We useState for both and define a state variable and an updater function for both of the fields. What if we could simplify this further? Here’s a custom hook for handling any kind of input value changes (note: the convention for naming a custom hooks is: use).

import { useState } from 'react';

export const useInputValue = (initial) => {
    const [value, setValue] = useState(initial)
    return { value, onChange: e => setValue(e.target.value) }
}

We use useState to handle the changes as we did in the previous example, but this time we return the value and an onChange function to update that value. So, the login form can now look like this:

import React from 'react';
import { useInputValue } from './Custom'

const Form = () => {
    const email = useInputValue('')
    const password = useInputValue('')

    return (
        <div className="App">
            <header className="App-header">
                <div>
                    <input type="text" placeholder="Email" {...email} />
                </div>
                <div>
                    <input type="password" placeholder="Password" {...password} />
                </div>
            </header>
        </div>
    );
}

export default Form;

We initialize useInputValue with an empty string for both of our fields, and set the result to the name of the field. We can put this back in the input element so the input element renders the value and onChange functions dynamically.

Now, we’ve made this form even simpler — and our custom hook can be reused wherever we need a form input element!

I think that this is one of the most useful things about hooks — the ability to make your own and allow for this previously stateful logic that was locked inside each component to be taken out and reused, allowing for each component to become simpler.

So we’ve gone over: useState, useEffect, useReducer, and finally, custom hooks. There’s a few basic things that we haven’t gone over just yet — namely, the two general rules to follow with Hooks:

1. Only call Hooks at the top level — Not in loops, nested functions, conditions, etc. This ensures that hooks are always called in the same order after each render. This is important because React relies on the order that Hooks are called to determine which state corresponds to a useState call (if you are using multiple). If one of your hooks is hidden in a loop, nested function, or a conditional, the order can change from render to render, messing up which state corresponds to which useState.
2. Only call Hooks from React functions or custom hooks — In other words, don’t call Hooks from JavaScript functions.

Hopefully this clears up how and when to use hooks for you! Some additional resources you can take a look at:

• The React docs
• Collection of Hooks resources

If you have any questions/comments, please feel free to ask below!