DEV Community: Sai Sandeep Vaddi

How to communicate between Content Script, Popup, and Background in Browser Extension development

Sai Sandeep Vaddi — Thu, 07 Jan 2021 17:19:43 +0000

Message passing between different parts of a browser extension is the most confusing part when starting with browser extension development. This post is about how I generally structure my web extensions code to communicate between Content Script, Background, and popups (Browser Action).

These are the pieces we will use.

Create IDs for the messages we will be using in a file. We can use regular object literals or enum if you use TypeScript.
Create a mapping ( Map<MessageID, callback> or regular object literal ) where we fix the message id which we created in Step 1 with a callback to run when the message with that ID arrives.
Register message listeners. Loop through the items in the Map we created in Step 2 and add a listener which is the value for each key (MessageID).

Let's write some code

The finished code is available in my GitHub at web-extension-communication-blog-post. I recommend you open the link and follow along with me. We will also use a polyfill so we don't have to deal with the API differences between Firefox and Chrome. Also, the polyfill allows Promise-based API for both Firefox and Chrome. I am using webextension-polyfill-ts which is a TypeScript wrapper for Mozilla's webextension-polyfill.

Our messages will be simple. We will exchange "Hi" or "Bye" between Content Script and Background.

First, we will write two utility functions that we can use to send messages between Content Script and Background.

// Messenger.ts
import { browser } from "webextension-polyfill-ts";

const Messenger = {
  /**
   * Send a message to Background script
   *
   * @param {BackgroundMessage} type Background Message Type
   * @param {*} [data=null]
   * @return {*}
   */
  async sendMessageToBackground(type, data = null) {
    try {
      const response = await browser.runtime.sendMessage({ type, data });
      return response;
    } catch (error) {
      console.error("sendMessageToBackground error: ", error);
      return null;
    }
  },

  /**
   * Send a message to Content Script of a Tab
   *
   * @param {number} tabID Tab ID
   * @param {ContentScriptMessage} type
   * @param {*} [data=null]
   * @return {*}
   */
  async sendMessageToContentScript(tabID, type, data = null) {
    try {
      // Notice the API difference - browser.tabs to send to content script but browser.runtime to send to background.
      const response = await browser.tabs.sendMessage(tabID, { type, data });
      console.log("response:", response);
      return response;
    } catch (error) {
      console.error("sendMessageToContentScript error: ", error);
      return null;
    }
  },
};

I like to put these two functions in a separate file because we don't have to constantly throw in browser.tabs or browser.runtime API everywhere. We get cleaner code with Messenger.sendMessageToBackground and Messenger.sendMessageToContentScript functions.

Remember I told you in Step 1 that we will create IDs for each type of messages, let's define those. I am using TypeScript enums because they are easy to type the functions, but you can use simple objects as well. The IDs can be simple numbers - 1, 2, etc.,

// messages.ts
export enum ContentScriptMessages {
  SAY_HELLO_TO_CS,
  SAY_BYE_TO_CS,
}

export enum BackgroundMessages {
  SAY_HELLO_TO_BG,
  SAY_BYE_TO_BG,
}

Now whenever we need to talk to Background script from Content Script or Popup, we can write Messenger.sendMessageToBackground(BackgroundMessages.SAY_HELLO_TO_BG, {message: "Hey Background"}).

Sending message to Content Script from Background is also similar with a difference that we need to pass the tab ID of the content script. That is the first parameter you see in Messenger.sendMessageToContentScript(tabID, ContentScriptMessages.SAY_HELLO_TO_CS, {message: "Hey Content Script!"}) function.

Registering Message listeners

We will register the message listeners that we talked about in Step 2 and 3. This code is similar for both Content Script and Background. We will register ContentScriptMessages in content script initialization and BackgroundMessages in background initialization.

// content-script.ts
// Install webextension-polyfill for JavaScript based projects
import { browser } from "webextension-polyfill-ts";
import { BackgroundMessages, ContentScriptMessages } from "./messages";
import Messenger from "./Messenger";

class ContentScript {
  requests = new Map();

  async receiveHello(sender, data) {
    console.log(`receiveHelloFromBackground: `, data);
  }

  async receiveBye(sender, data) {
    console.log(`receiveByeFromBackground: `, data);
  }

  async sayHelloToBackground() {
    const response = await Messenger.sendMessageToBackground(
      BackgroundMessages.SAY_HELLO_TO_BG,
      { message: "Hello Background!!!" }
    );
    console.log("Background Response: ", response);
  }

  async sayByeToBackground() {
    await Messenger.sendMessageToBackground(BackgroundMessages.SAY_BYE_TO_BG, {
      message: "Bye Background!!!",
    });
  }

  registerMessengerRequests() {
    this.requests.set(ContentScriptMessages.SAY_HELLO_TO_CS, this.receiveHello);
    this.requests.set(ContentScriptMessages.SAY_BYE_TO_CS, this.receiveBye);
  }

  listenForMessages() {
    browser.runtime.onMessage.addListener((message, sender) => {
      const { type, data } = message;
      return this.requests.get(type)(sender, data);
    });
  }

  init() {
    // 1. Create a mapping for message listeners
    this.registerMessengerRequests();

    // 2. Listen for messages from background and run the listener from the map
    this.listenForMessages();
  }
}

new ContentScript().init();

//background.ts
import { browser, Runtime } from "webextension-polyfill-ts";
import { BackgroundMessages, ContentScriptMessages } from "./messages";
import Messenger from "./Messenger";
import { IMessage, MessageListener } from "./types";

class Background {
  requests = new Map<BackgroundMessages, MessageListener>();

  async receiveHello(sender: Runtime.MessageSender, data: IMessage<any>) {
    console.log("receiveHelloFromContentScript: ", data);
    return {
      message: "Hey there!!!",
    };
  }

  async receiveBye(sender: Runtime.MessageSender, data: IMessage<any>) {
    console.log("receiveByeFromContentScript: ", data);
    return {
      message: "Bye there!!!",
    };
  }

  async sayHelloToContentScript(tabID: number) {
    await Messenger.sendMessageToContentScript(
      tabID,
      ContentScriptMessages.SAY_HELLO_TO_CS,
      { message: "Hello from BG!!!" }
    );
  }

  async sayByeToContentScript(tabID: number) {
    await Messenger.sendMessageToContentScript(
      tabID,
      ContentScriptMessages.SAY_BYE_TO_CS,
      { message: "Bye from BG!!!" }
    );
  }

  registerMessengerRequests() {
    this.requests.set(BackgroundMessages.SAY_HELLO_TO_BG, this.receiveHello);
    this.requests.set(BackgroundMessages.SAY_BYE_TO_BG, this.receiveBye);
  }

  listenForMessages() {
    browser.runtime.onMessage.addListener((message, sender) => {
      const { type, data } = message;
      return this.requests.get(type)(sender, data);
    });
  }
  // Example: Send message to content script of active tab
  sendHelloToActiveTab() {
    browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
      tabs.forEach((tab) => {
        this.sayHelloToContentScript(tab.id);
      });
    });
  }

  init() {
    // 1. Create a mapping for message listeners
    this.registerMessengerRequests();

    // 2. Listen for messages from background and run the listener from the map
    this.listenForMessages();
  }
}

new Background().init();

We can use the messages.ts and Messenger.ts from popup as well. Since popup won't be open all the time, we don't have to add message listeners there. I prefer to use the Messenger.sendMessageToBackground and use the return value in the popup.

Conclusion

We've abstracted most of the messaging to messages.ts and Messenger.ts. Whenever you want to add new types of messages, update the enum (or add a key if you used objects) in messages.ts and add a listener in the content script or background in their registerMessengerRequests function.

This code works in Firefox and all chromium-based browsers. Simply send a message and await for the response if the other side returns something from the listener. Thanks to Mozilla's webextension-polyfill we get cross-browser support and don't have to deal with the callback version of Chrome's API.

There are other ways people are trying to solve this like webext-redux which is a clever way for message passing along with managing state between different parts of the extension the redux way. But I feel it adds additional verbose API in an attempt to solve existing complexity and only works with React. Feel free to check that repository if that suits your requirements.

You can install the sample extension I built for this blog post here.

Have a great day !!! 👋

DEV iOS can't open links from other apps.

Sai Sandeep Vaddi — Sun, 03 Jan 2021 17:51:18 +0000

Whenever I click on the DEV article links from anywhere in browser or email newsletters, it tries to open in DEV iOS app. But instead of opening the article it always opens the home page.

Can someone please tell me if this is a bug? How do I disable the DEV app to open article links. It's very annoying I have to copy the link and then open the link in a browser, even then it asks me to open in Dev which I have to cancel because it won't work.

Is YouTube slower in browsers other than Chrome?

Sai Sandeep Vaddi — Tue, 22 Dec 2020 02:20:17 +0000

I've been using the new Edge browser. When I click on any YouTube comments to expand replies, it takes a long time to load. Sometimes, it won't load at all and gets stuck with a loader.

Surprisingly, it doesn't happen on Chrome. I've tested by removing all the extensions as well. Internet speed is also same. It's annoying to open Chrome just for YouTube.

Has anyone else seen this?

Is collecting Sentry exceptions part of telemetry?

Sai Sandeep Vaddi — Tue, 29 Sep 2020 00:07:25 +0000

This is for folks who use some kind of exception collection system like Sentry.

I want to include sentry.io to collect error reports.

It is an electron app. The app is installed on user's machines so once installed, I will get exception reports from many places and may be very difficult change the settings if user choses not to download new versions.

My question is, is collecting sentry exception reports considered collecting Telemetry and should take user's permission first?

If so, can you please tell me how to dynamically disable sending in Sentry if user opts-out. I don't see any such option in the API.

Sentry allows to remove ip_address and email before sending the event to their server. I've removed collecting ip_address. There is no registration for my app. So there is no other data like email is collected anyway.

Sentry also seems to give options to trace performance. How helpful is that?

Simple structure to write forms in React with Formik

Sai Sandeep Vaddi — Mon, 07 Sep 2020 15:28:22 +0000

Introduction

I wanted to share how I use Formik to write forms in my react code. I expect you've already heard and tried Formik before so we can discuss mostly component structure here.

This article is not intended to be a full Formik tutorial. Formik docs has all the information you need.

useFormik hook

Out of different ways you can use Formik to create forms, the useFormik hook is the only thing I've ever needed. It takes a config object and returns an object with all the tools we need to create forms.

The minimum values you need to add in the config object are:

initialValues object - Values that go inside the form fields when the form is rendered. This is the initial state of the form.
onSubmit function - Receives the final values when the user submits the form. Use this function to clean up the values if needed before sending it to the server.
validate function - Run validations on values and return errors. There is an alternative validationSchema which you can use to define a schema using Yup object schema validation library.

const formik = useFormik({
  initialValues,
  onSubmit,
  validate,
});

const {
  values,
  errors,
  handleSubmit,
  setFieldValue,
  ...andManyOthers
} = formik;

Component Structure

I always use the good old two-level container & presentational structure for forms.

A container component where I define all the config that goes in useFormik(config) hook.
A presentational component that receives this config prop and renders the form component.

This structure is a general style to write reusable components. This works even better for forms by creating separate containers for create and edit items but uses the same <Form /> component that displays the form.

For example, a user account form structure looks like this.

<CreateUserFormContainer />
<UpdateUserFormContainer />
<UserForm />

validate function or validationSchema goes in another file and imported into form containers.

Even if you don't need both create and edit, writing a form container keeps things clear in large forms.

If we are using both forms, I also send an extra isNew prop to <UserForm /> to know whether it's a create form or an edit form. This helps to display correct error messages and other text.

User account form

Here's the CodeSandbox Link to see the code for a sample User account form along with some utils and validations.

Final Thoughts

Although we've only needed the useFormik hook, if you want to create custom fields using Formik elements like <Field>, <ErrorMessage>, useFormik won't work. So, be sure to check useFormik docs to see what are you missing by using the useFormik hook.

If you find yourself writing too many conditionals in JSX to use the same <Form /> for both create and edit or there are a lot of differences in form fields in create and edit forms, it's time to separate them in different components.

You never need to store form data in a global state especially using state-management libraries like Redux or MobX.

Is there good a cloud-based macOS VM service?

Sai Sandeep Vaddi — Fri, 28 Aug 2020 19:19:11 +0000

Hey all,

I'm looking for a cloud-based macOS VM service similar to AWS, Azure VMs that can be used for quick testing electron apps? Better if it has some bearable performance and affordable as I'd need it only for couple of hours a month.

Thank you

What do you use for structured logging in NodeJS?

Sai Sandeep Vaddi — Fri, 21 Aug 2020 21:02:04 +0000

I use Winston + Morgan with daily rotating log file.

But, the searching, filtering is kind of hard to do. I know there are online SaaS loggers like loggly. I'm searching for some good & easy to setup practices about backend logging.

How do you setup your logging in NodeJS apps or any backend?

Does anyone like VSCode new Source Control Menu?

Sai Sandeep Vaddi — Thu, 20 Aug 2020 18:51:12 +0000

I liked having Pull and Push outside.

Now I'm searching whole menu to carefully go inside "Pull, Push" and choose. It's making me crazy.

I'm forcing myself to form habit to use Ctrl + Shift + P and select "Git:Push" now. 😂

Anybody know if there is a setting to get the old Git menu back?

Need help testing Electron App on macOS and Ubuntu

Sai Sandeep Vaddi — Wed, 19 Aug 2020 22:40:09 +0000

Hello folks,

I've been working on https://github.com/saisandeepvaddi/ten-hands, a free, open-source electron app for more than a year now. It helps developers, admins run command-line tasks (Example: package.json scripts. But any task.) with a GUI.

Although I test code and app life cycle on my Windows before releases, I don't have access to a macOS (tried all hacks with VirtualBox 👀). Ubuntu is also not installing recently in VirtualBox (after Windows update of course!). So I run Azure pipelines before release which gives me mac and ubuntu installers and pray Electron takes care of it.

I'd appreciate a quick install and test on a macOS or Ubuntu and let me know if it is working fine.

The project is written in React, TypeScript, NodeJS. It'd be a great start to contribute to a open-source as well.

Also, please let me know of any tips for cross-platform testing of Electron apps.

The latest releases are available in Azure Pipelines or releases section (a little older) in the repository.

Links:

Github: https://github.com/saisandeepvaddi/ten-hands
Website: https://tenhands.app

Thank you, Have a great day :)

The magic of >>> operator in JavaScript

Sai Sandeep Vaddi — Wed, 19 Aug 2020 07:16:28 +0000

A bit of << and >> before

Before we discuss '>>>', we need a small introduction for << (left shift) and >> (right shift) operators.

They shift the bits of the left operand by the number of places specified in the right operand in the direction of arrows.

Example: 0010 << 1 will result in 0100 and 0100 >> 1 will be 0010.

Importantly, they preserve the sign of the number. That means negative numbers stay negative after the shift.

>>>

>>> operator is called "unsigned right shift operator" or "zero-fill right shift operator".

If you do x >>> y, it shifts y number of bits to the right and fills 0s from left. The bits pushed out from the right are discarded. And, it doesn't preserve the sign after the shift.

>> vs >>>

A negative sign (-) is represented by setting the left most bit as 1. When >> is used on a negative number, the result will again get a 1 as the left most bit to preserve the sign. But, >>> pushes 0s from left even on negative numbers without preserving the sign bit. So, the result is always going to be a positive number.

When you observe the following, you'll see >> always keeps 1 as the left bit if there was a 1 before.

10000000000000000000000000000010 >> 1; // 11000000000000000000000000000001
10000000000000000000000000000010 >>> 1; // 01000000000000000000000000000001

10000000000000000000000000000100 >> 2; // 11100000000000000000000000000001
10000000000000000000000000000100 >>> 2; // 00100000000000000000000000000001

10000000000000000000000000100000 >> 4; // 11111000000000000000000000000010
10000000000000000000000000100000 >>> 4; // 00001000000000000000000000000010

>>> 0

Let's try not shifting using shift operators.

1 >> 0; // 1      Ok

-1 >> 0; // -1    Looks good

1 >>> 0; // 1     Makes sense

-1 >>> 0; // 4294967295  I'm JavaScript

Wait, what?

How is that if I shift zero bits, I get a large number?

To understand that, let's use toString(2) to see the results in binary.

(1 >> 0).toString(2); // 1
(-1 >> 0).toString(2); // -1
(1 >>> 0).toString(2); // 1
(-1 >>> 0).toString(2); // 11111111111111111111111111111111 (4294967295 in decimal)

Negative numbers are generally represented with 2's complement.

2's complement = reverse the bits and add 1

-1 = 2's complement of 1

1 in 32-bit binary // 00000000000000000000000000000001
1's complement of 1 = flip all bits // 11111111111111111111111111111110
2's complement of 1 = 1's complement + 1 // 11111111111111111111111111111110 + 1

-1 // 11111111111111111111111111111111

So, what happened was,

-1 gets converted to 2's complement.
Shift zero number of bits to the right. That means do not shift any bits.
Return the result as an unsigned 32-bit integer.

This always results in an unsigned integer between 0 (all 0 bits) and 0xFFFFFFFF (all 1 bits) because after >>> operation, the 1s on the left no longer represent the signedness of number.

So is that all?

No, it's not. This is JavaScript we're talking about.

When life gives lemons, JavaScript tries to make orange juice out of it.

-1 >>> 0; // 4294967295  Ok, I get it

// But,

"lemons" >> 0; // 0     🤷‍♂️
"lemons" >>> 0; // 0     🤷‍♂️

undefined >> 0; // 0     🤷‍♂️
undefined >>> 0; // 0     🤷‍♂️

null >> 0; // 0     🤷‍♂️
null >>> 0; // 0     🤷‍♂️

That's JavaScript coercion gods working their magic.

When >>> failed coercing "lemons" to a number, it resulted in 0 to ensure an integer result.

An example usage

let numbers = [1, 2, 3, 4, 5];

numbers.splice(numbers.indexOf(6), 1);

// numbers -> [1,2,3,4] --- Oops

Whenever you use splice with indexOf() in JS, always check if index is > 0. Otherwise if element is not found, .splice(-1, 1) removes the last element.

The '420 byte alternative to a popular library' way to write this is,

numbers.splice(numbers.indexOf(element) >>> 0, 1);

If indexOf(element) is -1, We know -1 >>> 0 will be 4294967295 so splice wouldn't remove anything wrong.

Seriously, don't write code like that. Unless you are trying to save the world with 50 fewer bytes of course!

What does <<< do then?

It doesn't exist.

Use your new-found >>> powers carefully. The best way to use is to avoid it.

References

Stackoverflow

MDN

ExploringJS

Simple Extensions to make your Ant Design Tables better.

Sai Sandeep Vaddi — Wed, 12 Aug 2020 19:20:33 +0000

If you've been using Ant Design in your projects, you know its Table component is extensive. You almost never need to reach out for third-party table libraries.

To extend that even further, I've released ant-table-extensions. Right now, it has support for exporting to CSV, and searching the table including fuzzy search (configurable).

I'll show a quick summary of features, please checkout docs and demos for more details.

The library adds four main props to Table.

exportable - Adds Export to CSV button and exports all rows and columns on click.
exportableProps - Customize CSV exporting.
searchable - Adds search box and search functionality. Searches for exact word by default.
searchableProps - Customize search.

NOTE: You already should have ant design in your project and its styles are imported.

Installation

npm install ant-table-extensions

// don't forget to import ant styles here.
- import { Table } from "antd";
+ import { Table } from "ant-table-extensions";

Exportable Table

It's as simple as adding exportable prop.

function App() {
  return <Table dataSource={dataSource} columns={columns} exportable />;
}

Now you'll have a button which exports the table to a CSV.

You can also configure how you can export your table,

If you want to pick columns to export,

function App() {
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      exportableProps={{ showColumnPicker: true }}
    />
  );
}

The result is,

You can modify how the data and headers should be in exported file.

There is a fields option part of exportableProps. Let's say you need to add Full Name in your CSV combining first name and last name.

const fields = {
  fullName: {
    header: "Full Name",
    formatter: (_fieldValue, record) => {
      return record?.firstName + " " + record?.lastName;
    },
  },
  country: "Your Country", // Country column will get 'Your Country' as header
};

return (
  <Table
    dataSource={dataSource}
    columns={columns}
    exportableProps={{ fields, fileName: "my-table" }}
  />
);

Check the docs for more configuration options.

There is an ExportTableButton component available if want to just grab the button that does all the exporting and put it wherever you want. Please check ExportTableButton docs for details.

Searchable Table

Again, It's as simple as adding searchable prop.

function App() {
  return <Table dataSource={dataSource} columns={columns} searchable />;
}

Now you'll have a search box.

It uses Fuse.js under the hood by default.

If you want fuzzy search enabled, use searchableProps option.

function App() {
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      searchableProps={{ fuzzySearch: true }}
    />
  );
}

Check the searchableProps to see available search customization.

There is a SearchTableInput component available if want to use the input box that does the searching and put it wherever you want. Please check SearchTableInput docs for details. Click show code in the docs to see usage. There's a little more state management to do for this.

As you might have guessed, you can use exportable and searchable to have both.

function App() {
  return (
    <Table dataSource={dataSource} columns={columns} exportable searchable />
  );
}

The result is,

GitHub repository at ant-table-extensions

Link to my GitHub to check my other projects. - saisandeepvaddi.

Thank you. Have a great day 🙂.

Simple way to manage state in React with Context

Sai Sandeep Vaddi — Mon, 03 Aug 2020 19:41:31 +0000

What we'll learn

We will learn how to use React's context API to manage state. Also, we'll see how to use useSWR hook from swr to manage async data from an API.

Our Requirements

Data can come from synchronous or asynchronous calls. An API endpoint or a simple setState.
Allow to update state data from the components that use it.
No extra steps like actions, thunks.

Small introduction to `swr`

SWR (stale-while-revalidate) is a caching strategy where data is returned from a cache immediately and send fetch request to server. Finally, when the server response is available, get the new data with changes from the server as well as updating the cache.

Here we are talking about the swr library from vercel. It provides a hook useSWR which we will use to fetch data from GitHub API.

Head over to swr's docs to learn more. The API is small and easy.

Store

We need a top-level component where will maintain this global state. Let's call this component GlobalStateComponent. If you've used Redux, this can be your store.

We'll test with 2 types of data for better a understanding.

Users data coming from an API like GitHub which might not change pretty quickly.
A simple counter which increments count by 1 every second.

// global-store.jsx

const GlobalStateContext = React.createContext({
  users: [],
  count: 0,
});

export function GlobalStateProvider(props) {
  // we'll update here
  return <GlobalStateContext.Provider value={value} {...props} />;
}

// a hook which we are going to use whenever we need data from `GlobalStateProvider`

export function useGlobalState() {
  const context = React.useContext(GlobalStateContext);

  if (!context) {
    throw new Error("You need to wrap GlobalStateProvider.");
  }

  return context;
}

Now we need to use useSWR hook to fetch users data. Basic API for useSWR looks like this.

const { data, error, mutate } = useSWR("url", fetcher, [options]);

// url - an API endpoint url.
// fetcher - a function which takes the first argument as parameters (url here)
// and returns a promise.
// options - Options for the hook. Configuration for this hook.

// data - response from the API request
// error - Error response from fetcher will be caught here.
// mutate - Update the cache and get new data from server.

We will use browser's built-in fetch API. You can use Axios or any other library you prefer.

const fetcher = (url) => fetch(url).then((res) => res.json());

With this, our complete useSWR hook looks like this.

const { data, error, mutate } = useSWR(`https://api.github.com/users`, fetcher);

And, we need a setState with count and a setInterval which updates the count every second.

...
const [count, setCount] = React.useState(0);
const interval = React.useRef();

React.useEffect(() => {
  interval.current = setInterval(() => {
        setCount(count => count + 1);
  }, 1000);

  return () => {
    interval.current && clearInterval(interval.current);
  }
}, []);
...

A context provider takes a value prop for the data. Our value will be both user related data and count.

If we put all these little things together in a global-store.jsx file, it looks like this.

// global-store.jsx

const GlobalStateContext = React.createContext({
  users: [],
  mutateUsers: () => {},
  error: null,
  count: 0,
});

export function GlobalStateProvider(props) {
  const { data: users, error, mutate: mutateUsers } = useSWR(
    `https://api.github.com/users`,
    fetcher
  );
  const [count, setCount] = React.useState(0);
  const interval = React.useRef();

  React.useEffect(() => {
    interval.current = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000);

    return () => {
      interval.current && clearInterval(interval.current);
    };
  }, []);

  const value = React.useMemo(() => ({ users, error, mutateUsers, count }), [
    users,
    error,
    mutateUsers,
    count,
  ]);

  return <GlobalStateContext.Provider value={value} {...props} />;
}

// a hook to use whenever we need to consume data from `GlobalStateProvider`.
// So, We don't need React.useContext everywhere we need data from GlobalStateContext.

export function useGlobalState() {
  const context = React.useContext(GlobalStateContext);

  if (!context) {
    throw new Error("You need to wrap GlobalStateProvider.");
  }

  return context;
}

How to use it

Wrap your top-level component with GlobalStateProvider.

// app.jsx
export default function App() {
  return <GlobalStateProvider>//...</GlobalStateProvider>;
}

Let's have two components, one consumes users data and another one needs counter.

We can use useGlobalState hook we created in both of them to get users and count.

// users.jsx

export default function Users() {
  const { users, error } = useGlobalState();

  if (!users && !error) {
    return <div>Loading...</div>;
  }

  return <ul>...use `users` here</ul>;
}

// counter.jsx

export default function Counter() {
  const { count } = useGlobalState();

  return <div>Count: {count}</div>;
}

// app.jsx

export default function App() {
  return (
    <GlobalStateProvider>
      <Counter />
      <Users />
    </GlobalStateProvider>
  );
}

That's it. Now you'll see both Counter and Users.

The codesandox link: codesandbox

But, Wait

If you put a console.log in both Users and Counter components, you'll see even if only count updated, Users component also renders.

The fix is simple. Extract users in a component between App and Users, and pass users as a prop to Users component, and wrap Users with React.memo.

// app.jsx

export default function App() {
  return (
    <GlobalStateProvider>
      <Counter />
-     <Users />
+     <UserWrapper />
    </GlobalStateProvider>
  )
}

// user-wrapper.jsx

export default function UserWrapper() {
  const { users, error } = useGlobalState();
  return <Users users={users} error={error} />;
}

// users.jsx

- export default function Users() {
+ const Users = React.memo(function Users({users, error}) {
- const {users, error} = useGlobalState();

  if (!users && !error) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
        ...use users here
    </ul>
  )
});

export default Users;

Now check the console.log again. You should see only Counter component rendered.

The finished codesandbox link: codesandbox

How to force-update users

Our second requirement was to update the state from any component.

In the same above code, if we pass setCounter and mutateUsers in the context provider's value prop, you can use those functions to update the state.

setCounter will update the counter and mutateUsers will resend the API request and returns new data.

You can use this method to maintain any synchronous, asynchronous data without third-party state management libraries.

Closing Notes

Consider using useReducer instead of useState if you end up with too many setStates in global state. A good use case will be if you are storing a large object instead of a single value like count above. Splitting up that object in multiple setState means any change in each of them will re-render all the components using your context provider. It'll get annyoing to keep track and bring in React.memo for every little thing.
react-query is another solid library as an alternative to swr.
Redux is still doing great for state management. The new redux-toolkit amazingly simplifies Redux usage. Check it out.
Have an eye on recoil, A new state management library with easy sync, async state support. I didn't use it on a project yet. I'll definitely try it soon.

Thank you and have a great day. 😀 👋