Jotai: Simplifying State Management in React Applications

Aymen Sakouhi — Wed, 28 Jun 2023 09:04:50 +0000

Let's start with definition of Jotai and what does it do?
Jotai is a state management library for React applications. It provides a simple and scalable approach to managing state in your React components. Jotai is built on the concept of atoms, which are individual units of state that can be shared and composed to create complex application states.

To understand Jotai, let's start by explaining what state management is in the context of React?
State management involves managing the data that is used by components to render and respond to user interactions.
In React, state is typically managed using the built-in useState hook or other external libraries like Redux or MobX. However, as applications grow larger and more complex, managing state becomes challenging, especially when it needs to be shared between multiple components.

This is where Jotai comes in:
Jotai introduces the concept of atoms, which are similar to React's useState but can be shared and accessed from multiple components without the need for prop drilling or complex Redux setups. Atoms are created using the atom function provided by Jotai. Here's an example:

import { atom } from 'jotai';

const countAtom = atom(0);

In this example, countAtom is an atom that holds the value 0. Any component can read and update this atom using Jotai's useAtom hook:

import { useAtom } from 'jotai';

function Counter() {
  const [count, setCount] = useAtom(countAtom);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

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

With Jotai, the state stored in atoms can be modified using the setCount function, which works similarly to setState in useState. The difference is that multiple components can access and update the same atom without any complex state management setup.

Jotai also provides additional features like derived atoms, which are atoms that compute their value based on other atoms. This allows for easy composition of atoms to build more complex states. Jotai's atoms are also fully reactive, meaning that any change to an atom triggers a re-render of all components that depend on that atom.

One of the key benefits of Jotai is its simplicity and lightweight nature. Unlike other state management libraries, Jotai has a minimal API surface and relies on React's built-in mechanisms for reactivity. It offers a more straightforward and intuitive approach to state management, especially for smaller to medium-sized applications.

Jotai is an open-source library and is actively maintained by its community. It has gained popularity among developers for its simplicity and performance. To get started with Jotai, you can install it via npm or yarn and explore the official documentation and examples available on the Jotai website.

In conclusion, Jotai is a state management library for React that provides a simple and scalable approach to managing state in your applications. By introducing the concept of atoms, Jotai simplifies the sharing and composition of state across components. With its lightweight and intuitive API, Jotai offers a refreshing alternative for state management in React applications.

React useEffect() wonders that you should know!

Aymen Sakouhi — Tue, 13 Jun 2023 12:08:21 +0000

useEffect is a built-in hook in React that allows you to perform side effects in your functional components. It's a fundamental hook that is used extensively in React applications. Here are some important details about useEffect that everybody should know:

Purpose: useEffect is used for handling side effects such as data fetching, subscriptions, or manually manipulating the DOM. It enables you to perform these operations after the component has rendered or when certain dependencies have changed.
Syntax: The useEffect hook takes two arguments: a callback function and an optional array of dependencies. The callback function contains the side effect logic, while the dependency array specifies which values the effect depends on.

   useEffect(() => {
     // Side effect logic
     // ...

     // Cleanup logic (optional)
     return () => {
       // Cleanup code
       // ...
     };
   }, [dependency1, dependency2]);

Execution Timing: By default, useEffect runs after every render of the component. This means it will run on the initial render and subsequent re-renders. You can control the execution of the effect by specifying dependencies. If the dependencies array is empty, the effect will only run once, after the initial render.
Dependency Array: The dependency array determines when the effect should be re-evaluated. If any value in the dependency array changes between renders, the effect will be re-executed. If the dependency array is omitted, the effect will run on every render.
Cleanup Function: If the effect requires any cleanup, such as canceling subscriptions or removing event listeners, you can return a cleanup function from the effect's callback. The cleanup function will be invoked before the component unmounts or before the effect is re-executed. This ensures that resources are properly released.
Dependencies and Equality: React determines whether the dependencies have changed by performing a shallow comparison (using Object.is) between the current and previous values. It's important to note that if the dependencies contain objects or arrays, you should ensure they are referentially stable or use proper techniques like immutability to avoid unintentional re-renders.
Multiple Effects: You can use multiple useEffect hooks in a single component to separate concerns and keep the code organized. Each effect operates independently of others.
Asynchronous Effects: If you need to perform asynchronous operations within the effect, you can mark the callback function as async and use await for promises. However, you should be aware that returning a promise from an effect does not cancel the effect. You may need additional cleanup logic to handle such scenarios.
Warning for Missing Dependencies: If you omit dependencies in the dependency array, React will display a warning in the console. It's important to provide all the dependencies that the effect relies on to ensure correct behavior.
Best Practices: To write efficient and predictable effects, consider the following best practices:
- Keep the effect's logic focused and self-contained.
- Avoid unnecessary re-execution of the effect by providing accurate dependencies.
- Perform any cleanup to prevent memory leaks and resource waste.
- Understand the order in which effects are executed by considering their dependencies.

By understanding and effectively using the useEffect hook, you can handle various side effects in your React components while adhering to the declarative nature of React's programming model.

DEV Community: Aymen Sakouhi

Jotai: Simplifying State Management in React Applications

React useEffect() wonders that you should know!