While the online tutorials and guides provided helpful information, I needed more clarity to really understand Redux.

But with persistence and practice, I eventually gained a better understanding of Redux's key concepts and successfully implemented them in my projects.

In this article, I will explain Redux in the simplest possible way. As someone who initially struggled with understanding Redux, I know how frustrating it can be to learn a new concept. But I hope this article will help make the concepts of Redux more accessible to beginner learners.

We will also delve into Redux Toolkit, a collection of tools that simplify using Redux. These tools help make Redux less daunting and easier to use.

What is Redux?

Redux is a state management library that allows you to manage the state of your JavaScript applications more efficiently and predictably.

Imagine you are building a house and need to keep track of all the materials you use and how much money you spend. Instead of keeping track of everything in your head or on a piece of paper, you could use a ledger to keep track of every transaction. Redux works similarly by keeping track of your application's state in a single place called the "store."

Let's say you're building an e-commerce site. You may need to keep track of the items in a user's cart, their payment information, and their shipping details.

Instead of passing this information from component to component using props, Redux allows you to store them in one central location where they can be easily accessed and updated. This makes it easier to manage complex states and keep your application organized.

It's important to note that Redux is not limited to React and you can use it with other frameworks or even vanilla JavaScript.

Why Should I Use Redux?

Redux can help simplify the state management process, especially when dealing with complex and interconnected components. Here are some reasons why you might want to use Redux in your application:

1. Centralized state management: With Redux, you can maintain the state of your entire application in a single store, making it easier to manage and access data across components.
2. Predictable state updates: Redux has a clear flow of data, which means changes to the state can only happen when you create an action and send it through Redux. This makes it easy to understand how your application's data will change in response to user actions.
3. Easier debugging: With Redux DevTools, you have a clear record of all the changes to your application's state. This makes locating and fixing issues in your code easier, saving you time and effort in the debugging process.
4. Better performance: By minimizing the number of state updates and reducing the need for prop drilling, Redux helps improve your application's performance.

How Does Redux Work?

As previously mentioned, Redux enables you to maintain a single centralized store that manages the state of your entire application. All components in your application can access this store and update or retrieve data from it as needed.

The key components that enable this centralized approach to state management are:

1. Store
2. Actions
3. Dispatch
4. Reducers

Let’s explore the role of each one:

The Store

The Redux store is like a giant container that holds all the data for your application.

Think of the store as a box with different compartments for different data types. You can store any data you want in these compartments, and it can hold various kinds of data, such as strings, numbers, arrays, objects, and even functions.

Also, the store is the single source of truth for your application's state. This means that any component in your application can access it to retrieve and update data.

Actions

An action is an object that describes what changes need to be made to the state of your application. It sends data from your application to the Redux store and serves as the only way to update the store.

An action must have a "type" property describing the action being performed. This "type" property is typically defined as a string constant to ensure consistency and avoid typos.

In addition to the "type" property, an action can have a "payload" property. The "payload" property represents the data that provides additional information about the action being performed. For example, if an action type is ADD_TASK, the payload might be an object containing a new task item's "id", "text", and "completed status".

Here's an example of an action:

{
  type: 'ADD_TASK',
  payload: {
    id: 1,
    text: 'Buy groceries',
    completed: false
  }
}

Note that to create actions, we use action creators. Action creators are functions that create and return action objects.

Here is an example of an action creator that takes in a task's text and returns an action object to add the task to the Redux store:

function addTask(taskText) {
  return {
    type: 'ADD_TASK',
    payload: {
      id: 1,
      text: taskText,
      completed: false
    }
  }
}

An appropriate analogy for actions and action creators would be a chef using a recipe. The recipe outlines the required ingredients and instructions to prepare a dish, similar to how an action in Redux specifies the needed details to modify the state of an application.

In this scenario, the chef represents the action creator, who follows the recipe to create the dish, similar to how an action creator creates an action based on predefined properties.

Dispatch

In Redux, dispatch is a function provided by the store that allows you to send an action to update the state of your application. When you call dispatch, the store runs an action through all of the available reducers, which in turn update the state accordingly.

You can think of dispatch as a mail carrier who delivers mail to different departments in a large company. Just like how the mail carrier delivers mail to different departments, dispatch delivers actions to various reducers in your Redux store. Each reducer is like a department in the company that processes the mail and updates its own part of the company's data.

Reducers

In Redux, a reducer is a function that takes in the current state of an application and an action as arguments, and returns a new state based on the action.

Here's an example of a simple reducer:

const initialState = {
  count: 0
};

function counterReducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

In the above code, we have a simple reducer called "counterReducer" that manages the state of a count variable. It takes in two arguments: state and action. The state argument represents the current state of your application, while the action argument represents the action dispatched to modify the state.

The reducer then uses a switch statement to check the "type" of the action, and based on that type, it updates the state accordingly.

For example, if the action type is "INCREMENT", the reducer returns a new state object with the count incremented by 1. Also, if the action type is "DECREMENT", the reducer returns a new state object with the count decremented by 1.

A perfect analogy for a reducer would be a kitchen blender. Just like a blender takes in different ingredients, blends them, and produces a smooth mixture, a reducer takes in the current state of an application and an action, processes them together, and produces a new state.

Example Project – Real App Implementation

Now that you understand the basics of Redux and how it works, let's create a simple real-world project. For this example, we'll create a basic ToDo List application where you can add and delete tasks.

Step 1: How to set up the project

Create a new React project by running the following command in your terminal. Replace "your-project-name" with the name of your project.

npm create vite@latest your-project-name -- --template react

cd your-project-name

npm install

The above command sequence will create a new React project using the Vite build tool and install all necessary dependencies.

Step 2: How to install Redux

Redux requires a few dependencies for its operations, namely:

• Redux: The core library enables the redux architecture.
• React Redux: Simplifies connecting your React components to the Redux store.
• Redux Thunk: Allows you to write asynchronous logic in your Redux actions.
• Redux DevTools Extension: Connects your Redux application to Redux DevTools

You can install them using npm, as shown below:

npm install \

redux \

react-redux \

redux-thunk \

redux-devtools-extension

Step 3: How to set up reducers

Now let's create the reducer for our application.

In the src directory, create a new folder called reducers, and inside that folder, create two new files: index.js and taskReducer.js.

The index.js file represents the root reducer, which combines all the individual reducers in the application. In contrast, the taskReducer.js file is one of the individual reducers that will be combined in the root reducer.

import taskReducer from "./taskReducer";
import { combineReducers } from "redux";

const rootReducer = combineReducers({
  tasks: taskReducer,
});

export default rootReducer;

In the above index.js file, we use the combineReducers function to combine all the individual reducers into a single root reducer. In this case, we only have one reducer (taskReducer), so we pass it in as an argument to combineReducers.

The resulting combined reducer is then exported so that other files in the application can import and use it to create the store.

Here's the code for taskReducer:

const initialState = {
  tasks: []
};

const taskReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TASK':
      return {
        ...state,
        tasks: [...state.tasks, action.payload]
      };
    case 'DELETE_TASK':
      return {
        ...state,
        tasks: state.tasks.filter(task => task.id !== action.payload)
      };
    default:
      return state;
  }
};

export default rootReducer;

Inside the above taskReducer.js file, we define a reducer function that takes two arguments: state and action. The state argument represents the current state of the application, while the action argument represents the action being dispatched to update the state.

The switch statement inside the reducer handles different cases based on the "type" of the action. For example, if the action type is ADD_TASK, the reducer returns a new state object with a new task added to the tasks array. And if the action type is DELETE_TASK, the reducer returns a new state object with the current tasks filtered to remove the task with the specified id.

Step 4: How to create the Redux store

Now that we have our basic setup ready, let's create a new file called store.js in the src directory. This is where you'll define your Redux store:

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

import taskReducer from "./reducers/taskReducer";

const store = createStore(
  taskReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

The code above sets up a Redux store by creating a new instance of the store using the createStore function. Then, the rootReducer – which combines all the application's reducers into a single reducer – is passed as an argument to createStore.

In addition, the code also uses two other libraries: redux-thunk and redux-devtools-extension.

The redux-thunk library allows you to write asynchronous actions, while the redux-devtools-extension library enables you to use the Redux DevTools browser extension to debug and inspect the state and actions in the store.

Finally, we export the store so we can use it in our application. We use the composeWithDevTools function to enhance the store with the ability to use the Redux DevTools extension, and the applyMiddleware function to apply the thunk middleware to the store."

Step 5: How to connect the Redux Store to the application

To connect the Redux store to the ToDo application, we need to use the Provider component from the react-redux library.

First, we import the Provider function and the Redux store we created into our main.jsx. Then, we wrap our App component with the Provider function and pass the store as a prop. This makes the Redux store available to all the components inside the App.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

import { Provider } from "react-redux";
import store from "./store";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Step 6: How to use Redux DevTools

Once you've set up the Redux <Provider> in your application, you can start using the Redux DevTools extension. To get started with it, you'll need to download the Redux DevTools Extension for your browser.

After installation, the DevTools will add a new tab to your browser's Developer Tools specifically for Redux.

Clicking on the "State" tab within the Redux DevTools will show you the entire state of your Redux store and any actions that have been dispatched and their payloads.

This can be incredibly useful when debugging your application, as you can inspect the state and actions in real-time.

Step 7: How to set up Redux Actions

Now that we have everything set up, let's create our actions. As I mentioned before, actions represent something that happened in the application. For example, when a user adds a new task, it triggers an "add task" action. Similarly, when a user deletes a task, it triggers a "delete task" action.

To create the actions, create a new folder called "actions" in the src directory and then create a new file called index.js. This file will contain all of the action creators for our application.

export const addTodo = (text) => {
  return {
    type: "ADD_TASK",
    payload: {
      id: new Date().getTime(),
      text: text,
    },
  };
};

export const deleteTodo = (id) => {
  return {
    type: "DELETE_TASK",
    payload: id,
  };
};

The above code exports two action creators: addTodo and deleteTodo. These functions return an object with a type property that describes the action that has occurred.

In the case of addTodo, the type property is set to "ADD_TASK", indicating that a new task has been added. The payload property contains an object with the new task's id and text values. The id is generated using the new Date().getTime() method creates a unique identifier based on the current timestamp.

In the case of deleteTodo, the type property is set to "DELETE_TASK", indicating that a task has been deleted. The payload property contains the id of the task to be deleted.

These action creators can be dispatched to the Redux store using the dispatch() method, which will trigger the corresponding reducer function to update the application state accordingly.

Step 8: How to dispatch actions

Now that we have created the necessary actions, we can move on to creating the components that will dispatch these actions.

Let's create a new folder named "components" inside the src directory. Inside this folder, we will create two new files: Task.jsx and TaskList.jsx.

The Task.jsx component will be responsible for adding tasks. But before we proceed, we need to import the following into the file:

• addTodo action: To add new tasks to the state.
• useDispatch hook: To dispatch the addTodo action.
• useRef: Allows us to obtain a reference to HTML elements.

import { useRef } from "react";
import { useDispatch } from "react-redux";
import { addTodo } from "../actions";

Once we have imported these necessary components, we can proceed to write code for Task.jsx.

const Task = () => {
  const dispatch = useDispatch();
  const inputRef = useRef(null);

  function addNewTask() {
    const task = inputRef.current.value.trim();
    if (task !== "") {
      dispatch(addTodo(task));
      inputRef.current.value = "";
    }
  }

  return (
    <div className="task-component">
      <div className="add-task">
        <input
          type="text"
          placeholder="Add task here..."
          ref={inputRef}
          className="taskInput"
        />
        <button onClick={addNewTask}>Add task</button>
      </div>
    </div>
  );
};

export default Task;

In the code above, we created a component consisting of an input field and a button. When a user clicks on the "Add task" button, the addNewTask function is executed. This function uses the useRef hook to obtain the input field's value, removes any leading or trailing whitespaces, and then dispatches the addTodo action with the new task as the payload.

Now, let's move on to the TaskList.jsx component, responsible for rendering the list of tasks and handling task deletions. To achieve this, we need to import the following:

• The useSelector hook provides access to the state from the Redux store.
• The deleteTodo action, is responsible for removing a task from the list of tasks in the Redux store.

import { useSelector, useDispatch } from "react-redux";
import { deleteTodo } from "../actions";

We will now write code for TaskList.jsx that maps over the tasks array and renders each task:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { deleteTodo } from '../actions';

const TaskList = () => {
  const tasks = useSelector((state) => state.tasks);
  const dispatch = useDispatch();

  const handleDelete = (id) => {
    dispatch(deleteTodo(id));
  };

  return (
    <div className="tasklist">
      <div className="display-tasks">
        <h3>Your tasks:</h3>
        <ul className="tasks">
          {tasks.map((task) => (
            <li className="task" key={task.id}>
              {task.text}
              <button
                className="delete-btn"
                onClick={() => handleDelete(task.id)}
              >
                delete
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default TaskList;

Here, the component loops over each task in the tasks array and displays text and a delete button. When the user clicks the delete button, the handleDelete function is called, dispatching the deleteTodo action with the task's id as the payload.

Finally, import the components into your App.jsx file and render them.

import Task from "./components/Task";
import TaskList from "./components/TaskList";

function App() {
  return (
    <div className="App">
      <Task />
      <TaskList />
    </div>
  );
}

export default App;

Step 9: Styling

For styling, copy the contents of this gist and paste it into your index.css file. The focus of this guide is only on functionality and not on styling. Therefore, only basic styles were included to ensure the application looked presentable.

Final Result

After implementing everything, the final result of our ToDo List application should look something like this:

As shown above, we can add tasks by entering texts in the input field and clicking the "Add task" button. We can also delete tasks by clicking the "delete" button next to each task.

The state and actions of the application can also be easily tracked and inspected using Redux DevTools. This feature helps debug and understand how the app works under the hood.

With that, you now have a fully functional ToDo application powered by Redux! The source code for the app is available on this GitHub repository.

Finally, it's important to note that an application's state is stored in memory when using Redux. Therefore, the state will be lost if a user refreshes the page or navigates away from the app.

So, to keep information even after a user leaves or closes the page, you need to store that information somewhere else outside of the app's memory. Various techniques, such as local or server-side storage, can be used to accomplish this.

Congratulations! You now have a good grasp of how to integrate Redux into your React applications. In the next section, we will explore Redux Toolkit and discover how it can simplify the process of writing Redux code with less effort.

How to Use Redux Toolkit

Writing Redux code can become complex and verbose, particularly as the size of an application grows. As the number of reducers and actions increase, it can become challenging to manage the different pieces and keep track of everything.

Fortunately, Redux Toolkit provides a solution to this problem. It gives a more streamlined and efficient way to manage the state of your application by abstracting away some of the more complex and repetitive aspects of Redux, such as creating reducers and actions.

Advantages of Redux Toolkit

Redux Toolkit provides several advantages over traditional Redux:

• It is easier to set up and requires fewer dependencies.
• Reduces boilerplate code by allowing the creation of a single file known as "slice" that combines actions and reducers.
• Provides sensible defaults for commonly used features, such as Redux Thunk and Redux DevTools. This means that you don't have to spend time configuring these features yourself, as they are already built into Redux Toolkit.
• It uses the immer library under the hood, which enables direct state mutation and eliminates the need for manually copying the state {...state} with every reducer.

In the next sections, we will explore how to use Redux Toolkit to simplify the Redux code for the ToDo application we built earlier.

How to set up Redux Toolkit

To use Redux Toolkit in your React application, you need to install two dependencies: @reduxjs/toolkit and react-redux.

The @reduxjs/toolkit package provides the necessary tools to simplify Redux development, while react-redux is needed to connect your Redux store to your React components.

npm install @reduxjs/toolkit react-redux

How to create a slice

Once you have installed the needed dependencies, create a new "slice" using the createSlice function. A slice is a portion of the Redux store that is responsible for managing a specific piece of state.

Think of the Redux store as a cake, where each slice represents a specific piece of data in the store. By creating a slice, you can define the behaviour of the state in response to particular actions using reducer functions.

To create a slice to manage our ToDo application, create a new file named src/features/todo/todoSlice.js and add the following code.

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  tasks: [],
};

const todoSlice = createSlice({
  name: "todo",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.tasks.push({ id: Date.now(), text: action.payload });
    },
    deleteTodo: (state, action) => {
      state.tasks = state.tasks.filter((task) => task.id !== action.payload);
    },
  },
});

export const { addTodo, deleteTodo } = todoSlice.actions;

export default todoSlice.reducer;

The above code defines a slice named todoSlice, with an initialState object that contains an empty array of tasks.

The reducers object defines two reducer functions: addTask and deleteTask. addTask pushes a new task object into the tasks array, and deleteTask removes a task from the tasks array based on its id property.

The createSlice function automatically generates action creators and action types based on the names of the reducer functions you provide. So you don't have to define the action creators yourself manually.

The export statement exports the generated action creators, which can be used in other parts of your app to dispatch actions to the slice.

And finally, the todoSlice.reducer function handles all actions automatically generated based on the reducer objects provided to the createSlice function. By exporting it as the default, you can combine it with other reducers in your application to create a complete Redux store.

How to set up Redux Store

Creating a Redux store is much simpler with Redux Toolkit.

The most basic way to create a store is to use the configureStore() function, which automatically generates a root reducer for you by combining all the reducers defined in your application.

To create a store for the application, add a file named src/store.js and add the following code:

import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./features/todo/todoSlice";

const store = configureStore({
  reducer: {
    todo: todoReducer,
  },
});

export default store;

In this example, we first import the configureStore function from the @reduxjs/toolkit package, and the todoReducer function from a separate file.

Then, we create a store object by calling configureStore and passing it an object with a reducer property. The reducer property is an object that maps reducer slice names to their corresponding reducer functions. In this case, we have one reducer slice called todo, and its corresponding reducer function is todoReducer.

Finally, we export the store object so that it can be imported and used in other parts of the application.

How to provide the Redux store to React

To make your Redux store available to the React components in your application, import the Provider component from the react-redux library and wrap your root component (usually <App>) with it.

The Provider component takes in the store as a prop and passes it down to all the child components that need access to it.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

import store from "./store.js";
import { Provider } from "react-redux";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Create components

You can now create React components such as Task.jsx and TaskList.jsx that use the useSelector hook to access the current state from the store. Similarly, you can use the useDispatch hook to dispatch actions to update the store, just as you did in plain Redux.

You should now have the same app as before with a few updates from Redux Toolkit and a lot less code to maintain.

Conclusion

If you've followed along with this tutorial, you should now have a solid understanding of Redux, both the traditional approach and the simplified version using Redux Toolkit.

I hope you found this article helpful and informative. I know it was a lot of material to cover, but I hope it serves as a comprehensive resource for beginners and intermediate learners seeking to learn Redux.

If you want to experiment with the code we've covered in this article, you can access it in the GitHub repository provided. Feel free to use it as a starting point for your own applications or as a reference as you continue to learn and explore the world of Redux.

Thank you for reading, and happy coding!

But it can be annoying to pass props when you have to send the same data to lots of components or when components are far away from each other. This can make an application slower and harder to work with.

Fortunately, React provides a built-in feature known as the context API that helps “teleport” data to the components that need it without passing props.

In this article, we'll explore how the context API works and how to use it effectively in your React applications.

The Problem with Passing Props

In React, passing props is a fundamental concept that enables a parent component to share data with its child components as well as other components within an application.

In many cases, passing props can be an effective way to share data between different parts of your application. But passing props down a chain of multiple components to reach a specific component can make your code overly cumbersome.

Illustration of passing props from parent to children

From the above diagram, to pass data down to the component "Child B", we need to pass it down through all the intermediate components, even if those components don't actually use the data themselves. This is what is referred to as "prop drilling."

Prop drilling can make your code more difficult to read and maintain, and can also make it harder to refactor your components later on.

This is where the Context API comes in. With Context API, you can store data at the top level of the component tree and make it available to all other components that need it without passing props.

How the Context API Works

Context API allows data to be passed through a component tree without having to pass props manually at every level. This makes it easier to share data between components.

A diagram illustrating how Context API works

For example, let’s say you have a shopping app with a component that shows a user’s shopping cart, and another component that shows the user’s order history.

With Context API, you can create a “context” that holds the user’s shopping information, like their cart and order history. Then, you can use that context in both the shopping cart and the order history component, without having to pass the information down through props.

It’s like having a big box that holds all the things you need for your shopping trip. You can take things out of the box when you need them, and put them back in when you’re done.

Basically, Context API consists of two main components: the context provider and the context consumer. The provider is responsible for creating and managing the context, which holds the data to be shared between components. On the other hand, the consumer is used to access the context and its data from within a component.

In the example given, the provider will create the context that holds the user's shopping information, while the consumer components (shopping cart and order history) will access that context to retrieve the data they need. This avoids the need to pass the information down through props, making your code more efficient and easier to manage.

How to Get Started with the Context API

To start using the Context API in your applications, you'll need to follow a few simple steps:

1. Create a Context Object

First, you need to create a context object using the createContext function from the 'react' library. This context object will hold the data that you want to share across your application.

Create a new file named MyContext.js in the src folder and add the following code to create a context object:

import { createContext } from 'react';

export const MyContext = createContext("");

In the above code, we're importing createContext from React and using it to create a new context object named "MyContext". Then, we are exporting the context object so that we can use it in other parts of our application.

2. Wrap Components with a Provider

Once you've created a context object, you need to wrap the components that need access to the shared data with a Provider component. The Provider component accepts a "value" prop that holds the shared data, and any component that is a child of the Provider component can access that shared data.

It's important to note that the Provider component should be wrapped around the top-level component in an application to ensure that all child components have access to the shared data.

Here's an example that demonstrates how to wrap components with a Provider in Context API:

// Create a parent component that wraps child components with a Provider

import { useState, React } from "react";
import { MyContext } from "./MyContext";
import MyComponent from "./MyComponent";

function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <MyContext.Provider value={{ text, setText }}>
        <MyComponent />
      </MyContext.Provider>
    </div>
  );
}

export default App;

In this example, we have a parent component called App. This component has a state variable called "text", which is initially set to an empty string. We've also defined a function called setText that can be used to update the value of text.

Inside the return statement of the App component, we've wrapped the children of this component with the provider component ("MyContext.Provider"). Then we've passed an object to the value prop of the provider component that contains "text" and "setText" values.

3. Consume the Context

Now that we've created the provider component, we need to consume the context in other components. To do this, we use the "useContext" hook from React.

import { useContext } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  const { text, setText } = useContext(MyContext);

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={() => setText('Hello, world!')}>
        Click me
      </button>
    </div>
  );
}

export default MyComponent;

In this example, we've used the useContext hook to access the "text" and "setText" variables that were defined in the provider component.

Inside the return statement of "MyComponent", we've rendered a paragraph element that displays the value of text. We've also rendered a button that, when clicked, will call the setText function to update the value of text to "Hello, world!".

And that's it! This is how you can use the Context API in your React application.

By creating a context object, defining a provider component, and consuming the context in other components, you can share data across your application in a simple and efficient way.

Use Cases of Context API

Here are some real-world use cases of Context API.

1. Theming: You can use Context API to store the current theme of your application and make it available to all components. This way, whenever the user switches the theme (such as enabling dark mode), all components will be updated with the new theme.
2. User Authentication: You can also use Context API to store a user's authentication status and pass it down to all the components that need it. This way, you can easily restrict access to certain parts of your application based on the user's authentication status.
3. Multilingual Support: You can store the current language of your application in the context and pass it down to all the components that need it. This way, you can easily switch between different languages without having to pass the language down as props to all the components.
4. Accessing data from external sources: Finally, you can use the Context API to store data retrieved from external sources such as APIs or databases and make it available to all components. This can simplify your code and make it easier to manage data across your application.

Overall, Context API provides a flexible and efficient way to manage state data across your application, and it can be particularly useful for managing global data that needs to be shared between multiple components.

Best Practices for Context API

As with any tool, there are best practices and common pitfalls to keep in mind when using the Context API in your projects. Here are some tips for effective use of the Context API:

1. Use a separate file to define your Context: It's a good practice to define your context object in a separate file to keep your code organized and easy to maintain.
2. Keep Context API limited to global state management only: It's best to use the Context API for managing state that needs to be accessed across multiple components in your application. Avoid using it for state that only needs to be accessed within a single component, as it can lead to unnecessary complexity and performance issues.
3. Use context providers sparingly: While context providers can be a powerful tool for managing global state, it's generally a good idea to use them sparingly. Instead, consider using props to pass data down through your component tree whenever possible.
4. Use default values: When creating a new context, it's a good idea to provide a default value that will be used if no provider is present. This can help prevent unexpected errors and make your code more robust. Note that, for the project we did above, we used an empty string as the default value for the context object.

Recap

In this article, we explored the React Context API, a powerful tool for managing state in React applications.

We have walked through the basics of the Context API, including creating a context, creating a Provider component to pass data to child components, and consuming data in other component using the useContext hook.

Conclusion

If you're interested in exploring how to implement a light/dark mode theme in your own React projects using the Context API, I've created a simple website that demonstrates how to do just that. You can find the code for the project on my GitHub.

By exploring the code and experimenting with your own modifications, you'll be well on your way to mastering the Context API and unlocking its full potential in your own projects.

Thank you for reading!

Without forms, many of the tasks that we take for granted on the web, such as logging in, signing up, or making purchases, would not be possible.

As such, learning how to create effective and user-friendly forms is essential for developers looking to build engaging and interactive web applications.

With its extensive collection of built-in hooks, React provides several features and techniques for creating and managing forms, including state management, event handling, and form validation.

The purpose of this guide is to provide a comprehensive and in-depth look at creating forms in React.

Getting Started...

In React, there are two ways of handling form data:

• Controlled Components: In this approach, form data is handled by React through the use of hooks such as the useState hook.
• Uncontrolled Components: Form data is handled by the Document Object Model (DOM) rather than by React. The DOM maintains the state of form data and updates it based on user input.

To better understand the difference between controlled and uncontrolled components, consider there are two ways of riding a bike.

In the first approach, you let the bike take control. You sit on the bike and let it decide the direction and speed. You might try to make it go in a certain direction by leaning your body, but ultimately, the bike decides where to go.

This is similar to uncontrolled components in React. You place a form element in the component, and the DOM takes control of it. The DOM decides the state of the input element and updates it based on a user's input.

In the second approach, you take control of the bike. You hold the handlebars and pedal, and you decide where to go and how fast to ride. You can easily slow down or speed up as needed.

This is similar to controlled components where a React component takes control of the form data, and maintains the state of form elements. The component decides when and how to update the state, and it re-renders itself based on the state changes.

In the upcoming sections, we will expound upon the distinction between controlled and uncontrolled components and provide practical examples to illustrate how each operates.

Controlled Components in React

In React, a controlled component is a component where form elements derive their value from a React state.

When a component is controlled, the value of form elements is stored in a state, and any changes made to the value are immediately reflected in the state.

To create a controlled component, you need to use the value prop to set the value of form elements and the onChange event to handle changes made to the value.

The value prop sets the initial value of a form element, while the onChange event is triggered whenever the value of a form element changes. Inside the onChange event, you need to update the state with the new value using a state update function.

Here's an example:

import {useState} from 'react';

export default function  ControlledComponent()  {
    const  [inputValue, setInputValue] =  useState('');

    const  handleChange = (event) => {
        setInputValue(event.target.value);
    };

return  (
<form>
    <label>Input Value:
    <input  type="text"  value={inputValue} onChange={handleChange} />
    </label>
    <p>Input Value: {inputValue}</p>
</div>
)};

In this example:

The useState hook defines a state variable (inputValue) and a state update function (setInputValue).

The value prop sets the initial value of the input element to the value of inputValue.

Also, the onChange event handles changes made to the input value. The handleChange function updates the inputValue state with the new value of the input element, and the updated value is immediately reflected in the state and displayed on the screen.

As the user types into the input field, the handleChange function updates the state variable using the "setInputValue" function. The component is then re-rendered, and the input field's value attribute is updated to reflect the new value of inputValue.

The value of the input field and the text displayed below it are always in sync, making it a controlled component.

How to handle dropdowns and checkboxes in Controlled Components

Just like with input elements, the value of a dropdown can be set by using the value prop in conjunction with the onChange event handler to update the state of the component.

For example, to handle a dropdown menu, you can define the initial value of the dropdown menu within the state of the component, then update the state when the value of the dropdown changes:

import { useState } from "react";

export default function Dropdown()  {
    const [selectedOption, setSelectedOption] = useState("option1");

    const  handleDropdownChange = (event) => {
        setSelectedOption(event.target.value);
    };

return  (
    <div>
        <label>
            Select an option:
                <select  value={selectedOption} onChange={handleDropdownChange}>
                <option  value="option1">Option 1</option>
                <option  value="option2">Option 2</option>
                <option  value="option3">Option 3</option>
            </select>
        </label>
        <p>Selected option: {selectedOption}</p>
    </div>
    );
}

Similarly, you can handle checkboxes by setting the checked prop of the checkbox input element based on the state of a component, and then updating the state when a checkbox is clicked.

Here's an example:

import { useState } from "react";

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <form>
      <label htmlFor="color">
        <input type="checkbox" name="color" checked={isChecked} onChange={handleChange}/>
        Blue
      </label>

      {isChecked && <div>Blue is selected!</div>}
    </form>
  );
}

export default Checkbox;

In this example, we have defined a state variable isChecked to keep track of whether the checkbox is checked or not. When the checkbox is clicked, the handleChange function is called, and it updates the isChecked state variable to a new value (true or false.).

The isChecked variable controls the checked attribute of the checkbox input and conditionally renders a message indicating that the checkbox is selected.

How to handle multiple form fields

When working with forms in React, it's common to have several form elements, such as text inputs, checkboxes, radio buttons, and others.

To manage the state of these form elements, you can define the values for the input fields as an object using a single state variable and update each respective state variable using the onChange event.

As an example, suppose you wish to create a form with the following fields:

• Text input for the user's name
• An email field for the user's email
• A textarea field for the user's message

Here's how you could handle these fields:

import { useState } from "react";

export default function Multiple() {
  const [formData, setFormData] = useState({name: "",email: "",message: ""});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Name: ${formData.name}, Email: ${formData.email}, Message: ${formData.message}`
    );
};

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" value={formData.name} onChange={handleChange}/>

      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" value={formData.email} onChange={handleChange}/>

      <label htmlFor="message">Message:</label>
      <textarea id="message" name="message" value={formData.message} onChange={handleChange}/>

      <button type="submit">Submit</button>
    </form>
  );
}

In the example code:

The useState hook defines a state object named formData that contains three properties: name, email, and message, each initialized to an empty string.

The handleChange function is called whenever a user types in one of the form fields. It extracts the name and value of the form field that has changed using the event.target object and then updates the formData state variable using the setFormData function.

The setFormData function uses the spread operator (...) to copy the previous formData object. Then it updates the value of the changed form field by setting its value prop with the new value.

By using an object to manage form data, we can easily keep track of the values of multiple form elements. This makes it easier to manage and manipulate the state of our form data, especially when dealing with complex forms with many form elements.

How to validate form input

Validating forms refers to the process of checking user input data to ensure that it meets specific criteria or requirements before it is submitted to a server or used in some other way.

Form validation can take various forms, depending on the type and complexity of the data being collected. Common types of form validation include:

• Required field validation: Checking that required fields are not left empty.
• Format validation: Ensuring that input data is in the correct format (for example, email addresses, phone numbers, and so on).
• Length validation: Checking that input data is within a certain length range.
• Pattern validation: Checking that input data matches a specific pattern.

Common methods for form validation include using built-in HTML validation attributes like required, minlength, and maxlength, as well as using React to perform custom validation logic.

As an example, suppose we have a form with an input field that requires a minimum of 5 characters. We can use state to track the value of the input field and display an error message if the length of the value is less than 5.

import { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');
  const [inputError, setInputError] = useState(null);

  function handleInputChange(event) {
    const value = event.target.value;
    setInputValue(value);

    if (value.length < 5) {
      setInputError('Input must be at least 5 characters');
    } else {
      setInputError(null);
    }
  }

  function handleSubmit(event) {
    event.preventDefault();
    if (inputValue.length >= 5) {
      // submit form
    } else {
      setInputError('Input must be at least 5 characters');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Fruit:
        <input type="text" value={inputValue} onChange={handleInputChange} />
      </label>
      {inputError && <div style={{ color: 'red' }}>{inputError}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, we have a simple form that allows the user to input a fruit name. The form has two states:

• inputValue: Represents the current value of the input field
• inputError: Represents any errors that may arise during form validation.

The handleInputChange function is called every time a user types a character in the input field. It updates the inputValue state to reflect the current value of the input field, and then checks whether the value is at least 5 characters long.

If the value is less than 5 characters, it sets the inputError state to the appropriate error message. Otherwise, it sets the inputError state to null (indicating that there are no errors).

Uncontrolled Components in React

Uncontrolled components in React refer to form elements whose state is not managed by React. Instead, their state is handled by the browser's DOM.

For instance, let's say you have a form that consists of a text input field, a select box, and a checkbox. In a controlled component, you would create a state for each form element and write event handlers to update the state whenever the user interacts with any of the form elements.

In contrast, an uncontrolled component allows the browser to handle the form elements' state. When a user enters text into a text input field or selects an option from a select box, the browser updates the DOM's state for that element automatically.

To get the value of an uncontrolled form element, you can use a feature called "ref". "Refs" provide a way to access the current value of DOM elements. You can create a "ref" using the useRef hook, then attach it to the form element you want to access. This allows you to retrieve the current value of an element at any time, without needing to manage its state in your React component.

Here's an example of an uncontrolled component:

import { useRef } from "react";

export default function Uncontrolled() {
  const selectRef = useRef(null);
  const checkboxRef = useRef(null);
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    console.log("Input value:", inputRef.current.value);
    console.log("Select value:", selectRef.current.value);
    console.log("Checkbox value:", checkboxRef.current.checked);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <p>Name:</p>
        <input ref={inputRef} type="text" />
      </label>
      <label>
        <p>Favorite color:</p>
        <select ref={selectRef}>
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
        </select>
      </label>
      <label>
        Do you like React?
        <input type="checkbox" ref={checkboxRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

In this example:

We have a form that contains a text input field, a select box, and a checkbox. Instead of creating state for each form element and writing event handlers to update the state, we're using uncontrolled components. This means that the browser is responsible for managing the state of the form elements.

When a user interacts with a form element, the browser automatically updates the DOM's state for that element. And to retrieve the current values of each form element, we're using the useRef hook.

Uncontrolled components can be useful in certain situations, such as when you need to integrate with third-party libraries or when you don't need to manipulate the form data.

Overall, uncontrolled components are a simpler approach to working with forms in React, and they can make your code more concise and easier to read. But it's important to note that using ref to access form element values can make your code harder to test and maintain, so use them judiciously.

How to Use React Component Libraries

Creating forms in React can be overwhelming, especially if you're new to the framework. You need to manage form state, handle user input, validate input data and more.

But the good news is that there are third-party libraries available to make everything easier for you.

These libraries can help simplify your form creation process. They provide a wide range of features including form validation, input masking, submission handling, error handling, and more. This makes it much easier to create forms that are both user-friendly and functional.

Some popular form libraries include:

• Formik
• Redux Form
• React Hook Form
• Yup.

In this section, we'll focus on learning how to use the React Hook Form library.

How to use React Hook Form

React Hook Form is a lightweight library for managing forms in React applications. Whether you need to create a simple contact form or a complex multi-step form, React Hook Form can help simplify your form creation process.

Installation

Getting started with React Hook Form is straightforward and requires only a few steps. First, you'll need to install the library in your project. You can do this using npm by running the following command:

npm install react-hook-form

Alternatively, you can use yarn to install React Hook Form:

yarn add react-hook-form

Once you've installed the library, you need to import the useForm hook from the react-hook-form package in your component.

import  { useForm }  from  "react-hook-form";

By importing the useForm hook, you can start using React Hook Form to manage forms in your application.

The useForm hook provides several functions and properties that you can use to manage your form:

• register: This function is used to register form fields with React Hook Form.
• handleSubmit: This is used to handle form submissions. It takes a callback function that is called when the form is submitted.
• errors: This represents an object containing any validation errors that occur when a form is submitted.
• watch: This function is used to watch for changes to specific form fields. It takes an array of form field names and returns the current value of those fields.

These are just a few examples of the functions and properties the useForm hook provides. You can find the complete list of functions and properties in the React Hook Form documentation.

How to set up the form

After importing the useForm hook, you can invoke it to get access to the functions and properties that it provides:

const { register, handleSubmit, formState:{errors} } = useForm();

In the above code, we're using destructuring to extract the register, handleSubmit, and errors properties from the useForm hook.

How to register form fields

The next step is to register form fields using the register function. The register function takes two parameters:

• name: The name of the form field.
• validationOptions: An optional object containing validation rules you can apply to a form field.

Here's an example of registering an input field and adding a validation rule that it is a required field.

<input name="firstName" {...register("firstName", { required: true })} />

How to handle form submission

To handle form submission, you can use the handleSubmit function.

const onSubmit = (data) => console.log(data);

<form onSubmit={handleSubmit(onSubmit)}>
  // form fields
</form>

In this example, we pass the onSubmit function to the handleSubmit function. The onSubmit function will be called when the form is submitted and will receive an object containing the values of each form field.

How to display validation errors

You can use the errors object to display any validation errors.

<input {...register("firstName", { required: true })} />
{errors.firstName && <p>This field is required</p>}

In the above code, we're using the errors object to display a validation error message if the firstName field is not filled out. We can also display error messages for other validation rules, such as minimum and maximum lengths, regular expressions, and more.

How to put it all together

With a basic understanding of React Hook Form, let's now put everything into practice and create a simple form with two fields: email and password. We'll require both fields to be filled out and validate the email field using a regular expression.

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Email</label>
      <input type="email" {...register("email", { required: true, pattern: /^\S+@\S+$/i })} />
      {errors.email && <p>Email is required and must be valid</p>}

      <label>Password</label>
      <input type="password" {...register("password", { required: true })} />
      {errors.password && <p>Password is required</p>}

      <button type="submit">Submit</button>
    </form>
  );
}

export default LoginForm;

In this section, we've covered the basics of how to use React Hook Form:

• To register form fields
• Handle form submissions
• Display validation errors

But this is just the tip of the iceberg. React Hook Form offers many more features and capabilities that we haven't covered here. So I highly recommend that you check out the React Hook Form documentation to learn more about how to use it effectively in your projects.

Recap

In this tutorial, we covered the basics of building forms in React. We learned that there are two common approaches to building forms in React: controlled and uncontrolled components.

Controlled components rely on state management to track the state of form inputs, while uncontrolled components use refs to access the form inputs and their values.

We also learned that using third-party libraries make form creation in React much easier. Libraries like React Hook Form provide a lot of functionality out of the box and can help reduce the amount of boilerplate code you need to build forms in React.

With these concepts in mind, you should be able to build complex forms in React that are easy to manage and provide a great user experience.

Conclusion

If you want access to all the code used in this article, including the styling, I have compiled it all in a single repository for your convenience. Head over to the repository and you will find everything you need.

Happy coding!

In traditional (synchronous) programming, each person would have to wait for the person before them to finish their task before starting their own.

But with asynchronous programming, everyone can start and work on their tasks simultaneously without waiting for the others to finish.

Similarly, in a computer program, asynchronous programming allows a program to work on multiple tasks simultaneously instead of completing one task before moving on to the next one. This can make the program get more things done in a shorter amount of time.

For example, a program can send a request to a server while handling user input and processing data, all at the same time. This way, the program can run more efficiently.

In this article, we will delve into the world of asynchronous programming in JavaScript, exploring the different techniques and concepts that are used to achieve this powerful programming paradigm.

From callbacks to promises and async/aawait, you will understand how to harness the power of asynchronous programming in your JavaScript projects.

Understanding asynchronous programming is essential for building high-performance web applications, whether you're a seasoned developer or just getting started with JavaScript. So, read on to learn more about this vital concept.

What is Synchronous Programming?

Synchronous programming is a way for computers to do things one step at a time, in the order they are given the instructions.

Imagine you're cooking dinner and have a list of tasks, like boiling water for pasta, frying chicken, and making a salad.

You would do these tasks one at a time and wait for each one to finish before moving to the next.

Synchronous programming works similarly, where the computer will complete one task before moving on to the next. This makes it easy to understand and predict what the computer will do at any given time.

Here's an example of synchronous code in JavaScript:

// Define three functions
function firstTask() {
  console.log("Task 1");
}

function secondTask() {
  console.log("Task 2");
}

function thirdTask() {
console.log("Task 3");  
}

// Execute the functions
firstTask();
secondTask();
thirdTask();

This code will output the following messages in the order they appear:

"Task 1"
"Task 2"
"Task 3"

The code will execute the tasks in the order you see them and wait for each task to be completed before moving on to the next one.

Diagram showing how synchronous programming works.

However, synchronous programming can be problematic in certain situations, particularly when dealing with tasks that take a significant amount of time to complete.

For example, let's say that a synchronous program performs a task that requires waiting for a response from a remote server. The program will be stuck waiting for the response and cannot do anything else until the response is returned. This is known as blocking, and it can lead to an application appearing unresponsive or "frozen" to the user.

Consider the following code:

function someLongRunningFunction() {
    let start = Date.now();
    while (Date.now() - start < 5000) {
        // do nothing
    }
    return "Hello";
}

console.log('Starting...');

let result = someLongRunningFunction();
console.log(result);

console.log('...Finishing');

In this example:

• The program starts by logging "Starting..." to the console.
• Then it calls the someLongRunningFunction, which simulates a long-running task that takes 5 seconds to complete. This function will block the execution of the rest of the program while it runs.
• Once the function completes, it will return "Hello", and the program will log it on the console.
• Finally, the program will log "Finishing" to the console.

During the 5 seconds that someLongRunningFunction() is being executed, the program will be blocked, become unresponsive, and be unable to execute the next line of code. This can cause the program to take a long time to complete and make the application unresponsive to the user.

However, if the program is executed asynchronously, it will continue to run the next line of code instructions rather than becoming blocked. This will enable the program to remain responsive and execute other code instructions while waiting for the timeout to complete.

What is Asynchronous Programming?

Asynchronous programming is a way for a computer program to handle multiple tasks simultaneously rather than executing them one after the other.

Diagram showing how asynchronous programming works.

Asynchronous programming allows a program to continue working on other tasks while waiting for external events, such as network requests, to occur. This approach can greatly improve the performance and responsiveness of a program.

For example, while a program retrieves data from a remote server, it can continue to execute other tasks such as responding to user inputs.

Here's an example of an asynchronous program using the setTimeout method:

console.log("Start of script");

setTimeout(function() {
  console.log("First timeout completed");
}, 2000);

console.log("End of script");

In this example, the setTimeout method executes a function after a specified time. The function passed to setTimeout will be executed asynchronously, which means that the program will continue to execute the next line of code without waiting for the timeout to complete.

When you run the code, the output will be:

Start of script
End of script
First timeout completed

As you can see, console.log("First timeout completed") will be executed after 2 seconds. Meanwhile, the script continues to execute the next code statement and doesn't cause any "blocking" or "freezing" behaviour.

In JavaScript, asynchronous programming can be achieved through a variety of techniques. One of the most common methods is the use of callbacks.

How to Use a Callback Function

Let's say you want to plan a birthday party for your child. You have to invite the guests, order a cake, and plan the games. But you also want to hire a clown to entertain the guests. You can only have the clown come to the party once all the other party arrangements are done, and the guests have arrived.

Illustration of a clown

So, you tell the clown to come to the party only after you have notified him that the guests have arrived. In this case, the clown represents a callback function, and the "guests arriving" represents the function that has to complete execution before the callback can be executed.

In code, a callback function is a function that is passed as an argument to another function, and it is executed after the first function has finished running. It's commonly used in JavaScript to handle asynchronous operations like fetching data from a server, waiting for a user's input, or handling events.

Here is a simple example of how you can use a callback function to handle an asynchronous operation:

// Declare function
function fetchData(callback) {
  setTimeout(() => {
    const data = {name: "John", age: 30};
    callback(data);
  }, 3000);
}

// Execute function with a callback
fetchData(function(data) {
  console.log(data);
});

console.log("Data is being fetched...");

In this example:

• We have a function called fetchData that uses the setTimeout method to simulate an asynchronous operation. The function takes a callback as an argument.
• The callback function is then passed the data retrieved by the function after the timeout has been completed.

The setTimeout method is used to execute the callback after a specified time (in this case, 3 seconds). The callback will be executed asynchronously, which means that the program will continue to execute the next line of code without waiting for the timeout to complete.

When you run the code, the output will be:

Data is being fetched...
{name: "John", age: 30}

As you can see, console.log("First timeout completed") will be executed after 3 seconds. Meanwhile, the script continues to execute the next statement, console.log("Data is being fetched...");.

This is the core concept of asynchronous programming. The script doesn't wait for the asynchronous operation to complete. It just continues to execute the next instruction.

What is Callback Hell?

Callbacks provide a useful way to handle asynchronous operations. However, when many callbacks are nested, the code can be complex and hard to read and understand.

This happens when you chain multiple callbacks together, one after the other, creating a pyramid-like structure of indentation called callback hell, also known as the "Pyramid of Doom".

Here is an example of callback hell:

getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      getEvenEvenMoreData(c, function(d) {
        getFinalData(d, function(finalData) {
          console.log(finalData);
        });
      });
    });
  });
});

In this example:

1. The getData function takes a callback as an argument and is executed after data is retrieved.
2. The callback function then takes the data and calls the getMoreData function, which also takes a callback as an argument, and so on.

This nesting of callbacks can make the code difficult to maintain, and the indentation makes it even harder to see the overall structure of the code.

To avoid callback hell, you can use a more modern way of handling async operations known as promises. Promises provide a more elegant way of handling the asynchronous flow of a program compared to callback functions. This is the focus of the next section.

How Do Promises Work?

A promise represents a way of handling asynchronous operations in a more organized way. It serves the same purpose as a callback but offers many additional capabilities and a more readable syntax.

A promise in JavaScript is a placeholder for a future value or action. By creating a promise, you are essentially telling the JavaScript engine to "promise" to perform a specific action and notify you once it is completed or fails.

Illustration of a promise and the JS engine

Next, callback functions are then attached to the promise to handle the outcome of the action. These callbacks will be invoked when the promise is fulfilled (action completed successfully) or rejected (action failed).

As a JavaScript developer, you will likely spend more time consuming promises returned by asynchronous Web APIs and managing their outcomes rather than creating them yourself.

How to Create a Promise

To create a promise, you'll create a new instance of the Promise object by calling the Promise constructor.

The constructor takes a single argument: a function called executor. The "executor" function is called immediately when the promise is created, and it takes two arguments: a resolve function and a reject function.

Diagram of the anatomy of a promise.

Write the following line of code to declare a promise:

// Initialize a promise
const myPromise = new Promise(function(resolve, reject) => {})

Now, let's inspect the myPromise object by logging it to the console.

console.log(myPromise);

This image represents an output of inspecting the promise object.

As you can see, the promise has a pending status and an undefined value. This is because nothing has been set up for the promise object yet, so it's going to sit there in a pending state forever without any value or result.

Now, let's set up myPromise to resolve with a string printed to the console after 2 seconds.

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Hello from the promise!");
    }, 2000);
});

Now, when you inspect myPromise object, you'll find that it has a status of "fulfilled", and a value set to the string you passed to the resolve function.

A promise has three states:

• Pending: initial state, neither fulfilled nor rejected.
• Fulfilled: meaning that an operation was completed successfully.
• Rejected: meaning that an operation failed.

Pending, fulfilled, and rejected states of a promise.

It's important to note that a promise is said to be settled when it is resolved or rejected.

Now that you know how promises are created, let's look at how you may consume them.

How to Consume a Promise

Consuming a promise involves the following steps:

1. Obtain a reference to the promise: To consume a promise, you first need to obtain a reference to it. Based on the code from the previous section, our reference to a promise will be the myPromise object.
2. Attach callbacks to the promise: Once you have a reference, you can attach callback functions by using the .then and .catch methods. The .then method is called when a promise is fulfilled and the .catch method is called when a promise is rejected.
3. Wait for the promise to be fulfilled or rejected: Once you've attached callbacks to the promise, you can wait for the promise to be fulfilled or rejected.

Here is an example of how you might consume a promise:

myPromise
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.log(error);
    });

Once the promise is fulfilled, the .then callback method will be called with the resolved value. And if the promise is rejected, the .catch method will be called with an error message.

You can also add the .finally() method, which will be called after a promise is settled. This means that .finally() will be invoked regardless of the status of a promise (whether resolved or rejected).

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    //code here will be executed regardless of the status
    //of a promise (fulfilled or rejected)
  });

How to Chain Promises

Promise chaining is a pattern that allows for a clear and easy-to-understand approach to handling asynchronous operations.

The pattern involves connecting multiple promises in a sequence, where the output of one promise is passed as input to the next promise.

The linking of the promises is achieved using the then() method. This method uses a callback function as an argument and returns a new promise. The new promise is then resolved with the value returned by the callback function.

Here is an example of promise chaining:

fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => processData(data))
    .then(processedData => {
        // do something with the processed data
    })
    .catch(error => console.log(error))

From the above code:

• The first promise, which is the fetch API function, is fetching data from a server.
• The second promise is parsing the response as JSON.
• The third promise is processing the data.
• The fourth promise is performing action on the data.
• The .catch method at the end of the chain will handle any errors that occurred in any of the previous promises.

It's important to keep in mind that .then methods are executed asynchronously and in order, each one waiting for the previous one to be resolved, and that the returned value of each .then will be passed as an argument to the next one.

Error Handling

When a promise is rejected, it will trigger the .catch() method, which handles errors. The .catch() method takes a single argument, which is the error thrown.

Another way of handling errors in a promise is by using the "try-catch" block inside a .then method.

Here is an example:

fetch("https://api.github.com/users/octocat")
  .then((response) => response.json())
  .then((data) => {
    try {
      //processing received data
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  })
  .catch((error) => console.log(error));

From the above code:

• The fetch() function makes a request to the GitHub API to fetch user data.
• The "try-catch" block is used inside the second .then method to handle any error that may occur when processing the data received from the server.
• And the outer .catch method will only catch errors that occur during the fetch request.

Handling errors is very important because promises are used to handle asynchronous operations, and these operations may fail for various reasons.

If an error occurs during the execution of a promise and it is not handled, the program will continue to execute and may lead to unexpected behaviour or crashes.

By handling errors, we can ensure that the program can continue to function even when an error occurs and also provide meaningful feedback to the user about the problem.

How to Use the Promise.all Method

The Promise.all() method takes an array of promises as input and returns a single promise that is fulfilled when all input promises have been fulfilled. It can be useful when you wait for multiple promises to be resolved before taking action.

For example, if you want to fetch data from multiple URLs.

let promise1 = fetch('https://jsonplaceholder.typicode.com/posts/1');
let promise2 = fetch('https://jsonplaceholder.typicode.com/posts/2');
let promise3 = fetch('https://jsonplaceholder.typicode.com/posts/3');

Here, promise1, promise2, and promise3 are promises that are fetching data from three different URLs.

Now, you can use Promise.all([promise1, promise2, promise3]) to wait for all the promises to resolve before doing something with the data, as shown below.

Promise.all([promise1, promise2, promise3])
.then((values) => {
  console.log(values);
})

In the above example:

• Promise.all() takes an array of promises as input and returns a new promise.
• The then method is then called on the returned promise to log the resolved values of all the input promises in the order they were passed to Promise.all().

Note that in an instance where any input promises are rejected, the returned promise will also be rejected with the value of the first rejected promise.

How to Use the Fetch API with Promises

I have been using the Fetch API for some examples in this article, and I understand that it may be unfamiliar to some readers. So I created this section to explain the basics of the Fetch API for those who may need to become more familiar with it.

The Fetch API is a built-in JavaScript feature that allows you to make network requests, such as fetching data from a server. It is a modern alternative to the older XMLHttpRequest API and is designed to be easier and more powerful.

Here is an example of how to use the Fetch API to fetch data from a server:

fetch('https://some-api.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

In this example,

• The fetch() method is used to make a request to the server located at "https://some-api.com/data". The returned value is a promise that will be fulfilled with the server's response.
• The first .then() method is called to consume the promise and extract JSON data from the response.
• The next then() method is called to log the extracted data to the console.
• If any errors occur, they will be caught in the catch() method and logged to the console.

I hope the above explanation helps to clear up any confusion about the Fetch API and allows you to better understand the examples provided in this article.

Async Functions with async/await

Async/Await is a feature that allows you to write asynchronous code in a more synchronous, readable way.

• async is a keyword that is used to declare a function as asynchronous.
• await is a keyword that is used inside an async function to pause the execution of the function until a promise is resolved.

Here's an example of how you can use async/await:

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await response.json();
  console.log(data);
}

getData();

In this example,

• the getData function is declared as an asynchronous function using the async keyword.
• Inside the asynchronous function, we use the await keyword to wait for the fetch function to complete and retrieve some data from an API.
• Once the data is retrieved, we use await again to wait and parse the retrieved data as JSON.
• And then finally, we log the data to the console.

"Aync/Await" is a powerful tool for handling asynchronous operations. It allows for more readable and maintainable code by eliminating the need for callbacks and providing a more intuitive way to handle asynchronous operations.

Using the "async" keyword before a function definition and the "await" keyword before an asynchronous operation makes the code look more like synchronous code, making it easier to understand.

Overall, "Async/Await" is valuable to the JavaScript developer's toolbox and can significantly simplify handling asynchronous operations in your code.

Conclusion

In summary, asynchronous programming is an essential concept in JavaScript that allows your code to run in the background without blocking the execution of other code.

Developers can create more efficient and responsive applications by using features like callbacks, async/await, and promises.

Asynchronous programming can be tricky to understand at first. But with practice and a solid understanding of the concepts, it becomes a powerful tool for building high-performance web applications.

Thank you for reading this article!

If you enjoyed this article and want to learn more about programming, follow me on Instagram at @alege_dev, where I post regular updates and tips on various programming topics.

With the help of the DOM, developers can access and change the different parts of a webpage. This allows them to create dynamic and interactive websites, where user interactions can trigger changes in the page's layout and content.

Understanding the DOM is crucial for creating responsive and user-friendly websites. So in this article, we will delve deeper into what the DOM can do and how you can use it in JavaScript.

What is the DOM?

The DOM, or Document Object Model, is like a map of a website. Just like how a map shows you where all the streets and buildings are in a city, the DOM shows you where everything is on a website.

The DOM helps your computer understand the different parts of a website and how they are put together.

Just like you can use a map to find your way around a city, programmers can use the DOM to find different parts of a website and change their properties. For example, they can make a button change color when a user hovers over it or make pictures move around on the screen.

The DOM is like a big puzzle. But using JavaScript, we can move the puzzle pieces around and make a website look and work however we want it to work.

The DOM + JavaScript

JavaScript is a programming language that helps us interact with the DOM. The DOM and JavaScript are like two friends that work together to make websites cool and interactive. Again, the DOM is like a big map that shows where all the different parts of the website are located.

On the other hand, JavaScript is like a magic wand that can change a website by using the map (DOM) to find the different parts of the website. It can make a button change color when you click on it or make a picture move to a different spot on the page.

Together, the DOM and JavaScript make the website come alive and respond to what you do, like moving your mouse or clicking on a button.

In summary, the DOM is like a map that shows where everything is and JavaScript is like a magic wand that can change things on that map.

DOM Structure – Understanding the DOM Tree

Imagine a website is like a big book, and each page in that book represents a different part of the website. The DOM tree is like a table of contents for that book. It shows you all the different parts of the website, and how they are organized.

Each part of the website is called an "element" and these elements are arranged in a tree-like structure.

The top of the tree is called the "root" and it represents the entire website. From there, the tree branches out into different sections, like the headings, paragraphs, images, and others that make up the entire website.

Illustration of the DOM tree

Just like how the table of contents in a book helps you find specific pages, the DOM tree helps computers find specific elements on a website. In addition, it allows developers to access and change those elements, so they can make the website interactive.

In short, the DOM tree represents the structure of a website in a way that computers can understand. Developers can use it to access and manipulate different elements in that structure to create dynamic web pages.

How to Access the DOM

Accessing elements in the DOM means finding specific parts of a website and changing or manipulating them.

To access an element on a website, you need to know the specific element you want to access.

JavaScript provides different methods to access the elements in the DOM, such as getElementById, getElementsByTagName, querySelector, and querySelectorAll.

These methods allow you to find an element based on its id, tagname, or classname and select it for manipulation.

For example, you can access a button on a webpage and change its text or color when a user clicks on it. Or, you can access an image on a webpage and change it to a different image when a user hovers over it.

Here's an example of how you might use the DOM to access an element on a webpage:

Let's say you have a webpage that displays a list of students and you want to change the background color of a specific student when they are clicked.

You can use the DOM method getElementById to access the specific element that represents the student and then use the style property in JavaScript to change the background color of that element.

Here's how that might look:

<div id="student-list">
  <div id="student-1" class="student">John</div>
  <div id="student-2" class="student">Alice</div>
  <div id="student-3" class="student">Bob</div>
</div>

.student {
  padding: 40px;
  margin-bottom: 10px;
  cursor: pointer;
}
.student:hover {
  background-color: #f1f1f1;
}

let student1 = document.getElementById("student-1");

student1.addEventListener("click", () => {
  student1.style.backgroundColor = "lightblue";
});

In this example, JavaScript is using the getElementById method to select the element with the id "student-1" and it changes its backgroundColor property to "light blue" when you click on it.

Similarly, you can use getElementsByClassName to select all elements with a specific class and querySelector to select an element based on a CSS selector.

This is just a basic example, but it illustrates how you can use the DOM to access specific elements on a webpage and change their properties in response to user interaction.

How to Add, Remove, and Modify DOM Elements

Adding, removing, and modifying elements in the DOM refers to adding new elements to a webpage, removing existing elements, and changing the properties of existing elements.

For example, if you want to add a new button to a webpage, you would use JavaScript to create a new element and then use the DOM to add that element to the webpage. Similarly, if you want to remove an element, you would use the DOM to find the element and then delete it.

Modifying elements also involves making changes to the properties of an existing element. For example, you could use the DOM to change the text inside a button.

Here’s how you can express this in code.:

    <div id="wrapper" class="btn-wrapper">
      <button id="create-btn" class="btn">Create new button</button>
    </div>

.btn-wrapper {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

let createButton = document.getElementById("create-btn");
let wrapper = document.getElementById("wrapper");

createButton.addEventListener("click", () => {
  let newButton = document.createElement("button");
  newButton.innerHTML = "Click me";
  wrapper.appendChild(newButton);
});

In the above example, we are creating a new button element and setting the text inside the button to "Click me". Then we're using the appendChild method to add this new button element to the webpage.

Recap

The Document Object Model (DOM) is an essential tool for creating interactive, dynamic web pages using JavaScript. It allows developers to access and manipulate the contents of a webpage in real time.

Understanding the DOM tree and how to access, add, remove, and modify elements is crucial for JavaScript developers.

We've seen how the DOM represents a webpage as a tree of objects and how we can use different methods like getElementById, getElementsByTagName, querySelector, and querySelectorAll to access specific elements on a webpage. With these methods, we can change the content, style, or layout of a webpage after it has loaded in the browser.

Additionally, we've seen how to add new elements to a webpage, remove existing elements, and change the properties of existing elements.

Conclusion

I hope this article has given you a better understanding of the Document Object Model and how to use it to create dynamic web pages.

Remember that the DOM is a powerful tool that you can use to create amazing websites, so don't be afraid to experiment and try new things.

Thanks for reading! Kindly share this article and follow me on Twitter @alege_dev for updates on future posts.