
# How do you know what to test 🤷🏼‍♂️

Here are some guidelines to follow if you're unsure of what exactly to test for in a React component.

- Test each component in isolation.
(Based on the idea of Arrange, Act, Assert)
- Render the component you want to test, use the `react-testing-library` to perform some UI modifications, finally assert expected results.
- As a general rule, just test inside the confines of the component you have selected or its children; do not test interaction with other components.
- Always mount React hooks in isolation when testing them.
That will function properly if the component where the hook is used has itself been tested.

# Our recipe for unit testing 🥘
We will employ `jest` and `react-testing-library`, the simplest yet most effective recipe for unit testing in React.
`jest` will be used to test our functions, mock objects, hooks, and functions, and to assert outcomes, among other things.
On the other hand, we'll test our React components using `react-testing-library` by automating user interaction and modifying the DOM.

# Superpowers of Jest 🔥
`jest` is one of the most underrated javascript tools in the world. 
You'll be suprised by the tasks this 5Kb package can do, so its pointless explaining all of them here.
So, the tasks `jest` will be doing in our tests are listed below.
- *it is a test runner that runs our tests^^* 🏎️
- describe our test files
- mock dependencies
- assert values

# Lets write some unit tests ✍🏽
There have been a lot of tests for the "function add()" lately.
So let's do something more enjoyable and "real world" for a change.

We will build and test a component that changes one currency into another in this article.

Let's build a component that changes money from INR (Indian Rupees) to USD (United States Dollars).

<Sandpack template="react-ts" options={{ editorWidthPercentage: 50 }} readOnly={true} activeFile={'/CurrencyConverter.tsx'} customSetup={{
  dependencies: {
    "@testing-library/dom": "9.0.0",
    "@testing-library/jest-dom": "4.1.0",
    "@testing-library/react": "9.2.0",
  },
}} testsIncluded={false}>
```ts
App.tsx
import React from "react";
import { render } from "react-dom";
import CurrencyConverter from "./CurrencyConverter";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <CurrencyConverter />
  </div>
);

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

export default App;

```

 ```ts
CurrencyConverter.tsx
import React, { useRef, useState } from "react";

export const convertToUSD = (val) => {
  return val / 81.71;
};

export default function CurrencyConverter() {
  const [valueInUSD, setValueInUSD] = useState(null);
  const inputRef = useRef(null);

  return (
    <div>
      <input
        type="number"
        data-testid="input"
        ref={inputRef}
        placeholder="Enter currency in INR"
      />
      <button
        data-testid="submit-btn"
        style={{
          marginLeft: "4px"
        }}
        type="submit"
        onClick={() => {
          const inputVal = inputRef.current;
          setValueInUSD(convertToUSD(inputVal.value));
        }}
      >
        Convert to USD
      </button>
      <br />
      <br />
      {valueInUSD && (
        <span data-testid="result">
          You have {valueInUSD.toFixed(2)} US dollars.
        </span>
      )}
    </div>
  );
}


```

```ts
styles.css
.App {
  font-family: sans-serif;
  padding-bottom: 50px;
}
```
</Sandpack>


Now that a working component is in place, let's create some tests for it.
This is a collection of a few of the test cases for the aforementioned component.

Some of the test cases for the above component are listed below.
- input & submit button rendered initially but the result is not
- the exact conversion amount should return correctly i.e. given 81.71 INR, it should return 1 dollar
- should return 0 dollars for 0 rupees

Please take your time reading over the component and the accompanying test cases to ensure that you fully comprehend them before moving on.


## Running the tests 🏃🏽‍♂️

A sandbox below displays the results of our test runs.
The following occurs while we execute the test scenarios.

- input & submit button rendered initially but the result is not ✅
- the exact conversion amount should return correctly i.e. given 81.71 INR, it should return 1 dollar ✅
- should return 0 dollars for 0 rupees ❌

<Sandpack template="react-ts" options={{ editorWidthPercentage: 50 }} readOnly={true} activeFile={'/CurrencyConverter.test.tsx'} customSetup={{
  dependencies: {
    "@testing-library/dom": "9.0.0",
    "@testing-library/jest-dom": "4.1.0",
    "@testing-library/react": "9.2.0",
  },
}} testsIncluded={true}>
```ts
App.tsx
import React from "react";
import { render } from "react-dom";
import CurrencyConverter from "./CurrencyConverter";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <CurrencyConverter />
  </div>
);

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

export default App;

```

 ```ts
CurrencyConverter.tsx
import React, { useRef, useState } from "react";

export const convertToUSD = (val) => {
  return val / 81.71;
};

export default function CurrencyConverter() {
  const [valueInUSD, setValueInUSD] = useState(null);
  const inputRef = useRef(null);

  return (
    <div>
      <input
        type="number"
        data-testid="input"
        ref={inputRef}
        placeholder="Enter currency in INR"
      />
      <button
        data-testid="submit-btn"
        style={{
          marginLeft: "4px"
        }}
        type="submit"
        onClick={() => {
          const inputVal = inputRef.current;
          setValueInUSD(convertToUSD(inputVal.value));
        }}
      >
        Convert to USD
      </button>
      <br />
      <br />
      {valueInUSD && (
        <span data-testid="result">
          You have {valueInUSD.toFixed(2)} US dollars.
        </span>
      )}
    </div>
  );
}


```

```ts
CurrencyConverter.test.tsx
import "@testing-library/jest-dom/extend-expect";
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import CurrencyConverter from "../CurrencyConverter";

describe("test Currency Converter component", () => {
  it("renders input & submit button initially without result", async () => {
    render(<CurrencyConverter />);
    expect(screen.getByTestId("input")).toBeInTheDocument();
    expect(screen.getByTestId("submit-btn")).toBeInTheDocument();
    expect(screen.queryByTestId("result")).not.toBeInTheDocument();
  });

  it("tests currency converter method for one dollar", async () => {
    render(<CurrencyConverter />);

    const input = screen.getByTestId("input");
    fireEvent.change(input, { target: { value: 81.71 } });
    fireEvent.click(screen.getByTestId("submit-btn"));

    expect(screen.queryByTestId("result")).toBeInTheDocument();
    // should show 1 dollars
    expect(screen.queryByTestId("result")).toBeInTheDocument();
    expect(
      screen.getByText("You have 1.00 US dollars", { exact: false })
    ).toBeInTheDocument();
  });

  it("should return 0 dollars for 0 rupees", () => {
    render(<CurrencyConverter />);

    const input = screen.getByTestId("input");
    fireEvent.change(input, { target: { value: 0 } });
    fireEvent.click(screen.getByTestId("submit-btn"));

    expect(screen.queryByTestId("result")).toBeInTheDocument();
    // should show 1 dollars
    expect(screen.queryByTestId("result")).toBeInTheDocument();
    expect(
      screen.getByText("You have 0.00 US dollars", { exact: false })
    ).toBeInTheDocument();
  });
});

```

```ts
styles.css
.App {
  font-family: sans-serif;
  padding-bottom: 50px;
}
```

</Sandpack>

Hmm, looks like the third test case failed 🤔

> You can take a moment to consider why at this point. (Hint: To better understand, you can reproduce the problem by entering 0 in the input of the above sandbox and pressing submit.)

<div style={{
  marginTop: '20vh'
}}>....still figuring? Here's the solution! 🧪</div>

<div style={{
  height: '20vh'
}}></div>

We can identify the reason for this as we attempt to duplicate the third test scenario.

```js
{ valueInUSD && (
  <span data-testid="result">
    You have {valueInUSD.toFixed(2)} US dollars.
  </span>
)}
```
🤨 This is the culprit.
This component isn't rendered when the input value is zero (zero).

We have discovered a fatal flaw in our component as a result of our tests failing.
The decision to render the result was made incorrectly.

Let's change it to reflect the correct value & also add the remaining test cases for our
converter utility. 🪄

<Sandpack template="react-ts" options={{ editorWidthPercentage: 50 }} readOnly={true} activeFile={'/CurrencyConverter.test.tsx'} customSetup={{
  dependencies: {
    "@testing-library/dom": "9.0.0",
    "@testing-library/jest-dom": "4.1.0",
    "@testing-library/react": "9.2.0",
  },
}} testsIncluded={true}>
```ts
App.tsx
import React from "react";
import { render } from "react-dom";
import CurrencyConverter from "./CurrencyConverter";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <CurrencyConverter />
  </div>
);

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

export default App;

```

 ```ts
CurrencyConverter.tsx
import React, { useRef, useState } from "react";

export const convertToUSD = (val) => {
  return val / 81.71;
};

export default function CurrencyConverter() {
  const [valueInUSD, setValueInUSD] = useState(null);
  const inputRef = useRef(null);

  return (
    <div>
      <input
        type="number"
        data-testid="input"
        ref={inputRef}
        placeholder="Enter currency in INR"
      />
      <button
        data-testid="submit-btn"
        style={{
          marginLeft: "4px"
        }}
        type="submit"
        onClick={() => {
          const inputVal = inputRef.current;
          setValueInUSD(convertToUSD(inputVal.value));
        }}
      >
        Convert to USD
      </button>
      <br />
      <br />
      {(!isNaN(valueInUSD) && valueInUSD !== undefined && valueInUSD !== null) && (
        <span data-testid="result">
          You have {valueInUSD.toFixed(2)} US dollars.
        </span>
      )}
    </div>
  );
}


```

```ts
CurrencyConverter.test.tsx
import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { fireEvent, render, screen } from "@testing-library/react";
import CurrencyConverter, { convertToUSD } from "./CurrencyConverter";

describe("Currency converter", () => {
  describe("test Currency Converter component", () => {
    it("renders input & submit button initially without result", async () => {
      render(<CurrencyConverter />);
      expect(screen.getByTestId("input")).toBeInTheDocument();
      expect(screen.getByTestId("submit-btn")).toBeInTheDocument();
      expect(screen.queryByTestId("result")).not.toBeInTheDocument();
    });

    it("tests currency converter method for one dollar", async () => {
      render(<CurrencyConverter />);

      const input = screen.getByTestId("input");
      fireEvent.change(input, { target: { value: 81.71 } });
      fireEvent.click(screen.getByTestId("submit-btn"));

      expect(screen.queryByTestId("result")).toBeInTheDocument();
      // should show 1 dollars
      expect(screen.queryByTestId("result")).toBeInTheDocument();
      expect(
        screen.getByText("You have 1.00 US dollars", { exact: false })
      ).toBeInTheDocument();
    });

    it("should return 0 dollars for 0 rupees", () => {
      render(<CurrencyConverter />);

      const input = screen.getByTestId("input");
      fireEvent.change(input, { target: { value: 0 } });
      fireEvent.click(screen.getByTestId("submit-btn"));

      expect(screen.queryByTestId("result")).toBeInTheDocument();
      // should show 1 dollars
      expect(screen.queryByTestId("result")).toBeInTheDocument();
      expect(
        screen.getByText("You have 0.00 US dollars", { exact: false })
      ).toBeInTheDocument();
    });
  });
  describe("test converter utility", () => {
    it("returns NaN for other dtypes than number", () => {
      const res = convertToUSD("random");

      expect(res).toBe(NaN);
    });

    it("returns correct results for numbers", () => {
      const res = convertToUSD(12345);

      expect(res).not.toBe(NaN);
    });

    it("returns correct results for zero", () => {
      const res = convertToUSD(0);

      expect(res).not.toBe(NaN);
      expect(res).toBe(0);
    });
  });
});

```

```ts
styles.css
.App {
  font-family: sans-serif;
  padding-bottom: 50px;
}
```

</Sandpack>

Looks better now!
✨
It turns out that the  logic to render the result was flawed.
Our tests succeed when the proper logic is used in its place.

```js
{ (!isNaN(valueInUSD) && valueInUSD !== undefined && valueInUSD !== null) && (
    <span data-testid="result">
      You have {valueInUSD.toFixed(2)} US dollars.
    </span>
)}
```

# Takeaways 🏆

Developers can avoid essential components breaking in production by adopting a mentality that emphasizes writing test cases.
Writing code concurrently with test cases appears to be the ideal method everyone should adopt to find issues quickly and correct them, as we can see from the example above.
Figuring out which can be possible ways to test a component in isolation
comes with experience and expertise, but it all starts with a test driven mindset.

I hope you enjoyed and found value in this post and wish you fewer 🐞 in your applications.

In the next article, we will focus on how to mock custom React hooks and other dependencies that your component needs so that you will able to test them
properly. Happy coding! 👋🏼


Testing is your greatest ally when it comes to detecting bugs and defects in your code. In this article, you will go through a step by step guide and understand why it is important to extensively test your components.

Testing React components w react-testing-library & jest


## What's a re-render?
A re-render occurs when a React component updates after its initial mount on the screen. In technical
terms, a second or further consecutive render of a component that is already on the screen is called
a *re-render*.

## Creating a Snortify playlist 😉
Let's take a simple example by designing a page to create a Snortify playlist. Let's build 3 components in the following structure:

```js
├── App (Main page) -- contains the input and songs list
├── MusicList (child component) -- used for selecting a song from a list of all songs.
      ├── MusicDetails (child of MusicList) -- shows metadata about a song
```

Let's get some coffee ☕️ and start coding. The end goal is pretty simple:
Allow a user to create a playlist, with a playlist name and a list of songs.

<Sandpack template="react" options={{ editorWidthPercentage: 50 }} readOnly={true}>
 ```ts
App.js
import { useState } from "react";
import MusicList from "./MusicList";
import "./styles.css";

export default function App() {
  const [playlistName, setPlaylistName] = useState("");
  const [addedSongs, setAddedSongs] = useState([]);

  const addSongToPlaylist = (song) => {
    setAddedSongs([...addedSongs, song]);
  };

  return (
    <div className="App">
      <h2>Hello Snortify!!!</h2>
      <p>Create a Playlist like it's a 1990s website.</p>
      <input
        name="playlist"
        onChange={(e) => setPlaylistName(e.target.value)}
        placeholder="Type here to re-render"
        style={{
          border: "2px solid red",
          padding: "10px"
        }}
      />
      <div
        style={{
          marginTop: "20px"
        }}
      >
        {addedSongs.length} songs added!
      </div>
      <p
        style={{
          marginTop: "40px",
          textAlign: "left",
          fontStyle: "italic"
        }}
      >
        List of all the songs in the world:
      </p>
      <MusicList
        addedSongs={addedSongs}
        addSongToPlaylist={(song) => addSongToPlaylist(song)}
      />
    </div>
  );
}


```

```js
allmusic.js
export const listofAllSongsInTheWorld = [
  {
    name: "The less I know the better",
    artist: "Tame Impala",
    releaseDate: "2015"
  },
  {
    name: "Helium",
    artist: "Glass Animals",
    releaseDate: "2021"
  },
  {
    name: "Time",
    artist: "Pink Floyd",
    releaseDate: "1973"
  },
  {
    name: "Roots",
    artist: "Imagine Dragons",
    releaseDate: "2015"
  },
  {
    name: "The Dichotomy of Fame",
    artist: "AR Rahman",
    releaseDate: "2011"
  }
];

```

```js
MusicList.jsx
import { listofAllSongsInTheWorld } from "./allmusic";
let counter = 0;

export default function MusicList({ addedSongs, addSongToPlaylist }) {
  counter += 1;

  return (
    <div>
      <div
        style={{
          marginBottom: "4px"
        }}
      >
        🔁 Render count: {counter}{" "}
      </div>
      {listofAllSongsInTheWorld.map((song) => {
        return (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "0 10px 10px 10px"
            }}
          >
            <div
              key={song.name}
              style={{
                textAlign: "left"
              }}
            >
              <div>{song.name}</div>
              <div
                style={{
                  fontSize: "10px",
                  color: "#777777"
                }}
              >
                {song.artist}
              </div>
            </div>
            <div>
              {addedSongs.find((s) => s.name === song.name) ? (
                <button disabled>✅ Added</button>
              ) : (
                <button onClick={() => addSongToPlaylist(song)}>Add</button>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

```

```js
styles.css
.App {
  font-family: sans-serif;
  padding-bottom: 50px;
}
```

</Sandpack>

Keep an eye on the render counter. This counter belongs to the `<MusicList />` component which keeps track
of how many times this component has re-rendered.

Notice that whenever you type any letter in the input box, the `<MusicList />` component re-renders. 🤯

This is not expected because this input is not interacting with the `<MusicList />` component at all.
Also, the list of music can be practically huge, and re-rendering such a big list would be a very bad idea.

So, what should we do?? 🤔

## Architecting the solution 👑

Note that the only thing that changes when we type in the input is the
state variable `playlistName`. We know that whenever the state changes,
the component will re-render to show the updated UI. So, `App.js` re-renders when `playlistName` is updated and when
it re-renders its child components are called again by `render()` function.

The solution is pretty straightforward if we think about it carefully. We need to tell React to
re-render `<MusicList />` only when certain variables change; *addedSongs* to switch button toggle to show that a song has already been added, not when
the input field updates.

Ring a bell?? 🔔

Sounds like a `useMemo` or `useCallback` use case. Let us re-write the above example, now keeping
in mind, all the above-discussed performance issues.

<Sandpack template="react" options={{ editorWidthPercentage: 50 }} readOnly={true}>
 ```ts
App.js
import { useCallback, useMemo, useState } from "react";
import MusicList from "./MusicList";
import "./styles.css";

export default function App() {
  const [playlistName, setPlaylistName] = useState("");
  const [addedSongs, setAddedSongs] = useState([]);

  const addSongToPlaylist = useCallback(
    (song) => {
      setAddedSongs([...addedSongs, song]);
    },
    [addedSongs]
  );

  const musiclist = useMemo(
    () => (
      <MusicList
        addedSongs={addedSongs}
        addSongToPlaylist={(song) => addSongToPlaylist(song)}
      />
    ),
    [addedSongs, addSongToPlaylist]
  );

  return (
    <div className="App">
      <h2>Hello Snortify!!!</h2>
      <p>Create a Playlist like it's a 1990s website.</p>
      <input
        name="playlist"
        onChange={(e) => setPlaylistName(e.target.value)}
        placeholder="Type here to re-render"
        style={{
          border: "2px solid red",
          padding: "10px"
        }}
      />
      <div
        style={{
          marginTop: "20px"
        }}
      >
        {addedSongs.length} songs added!
      </div>
      <p
        style={{
          marginTop: "40px",
          textAlign: "left",
          fontStyle: "italic"
        }}
      >
        List of all the songs in the world:
      </p>
      {musiclist}
    </div>
  );
}

```

```js
allmusic.js
export const listofAllSongsInTheWorld = [
  {
    name: "The less I know the better",
    artist: "Tame Impala",
    releaseDate: "2015"
  },
  {
    name: "Helium",
    artist: "Glass Animals",
    releaseDate: "2021"
  },
  {
    name: "Time",
    artist: "Pink Floyd",
    releaseDate: "1973"
  },
  {
    name: "Roots",
    artist: "Imagine Dragons",
    releaseDate: "2015"
  },
  {
    name: "The Dichotomy of Fame",
    artist: "AR Rahman",
    releaseDate: "2011"
  }
];

```

```js
MusicList.jsx
import { listofAllSongsInTheWorld } from "./allmusic";
let counter = 0;

export default function MusicList({ addedSongs, addSongToPlaylist }) {
  counter += 1;

  return (
    <div>
      <div
        style={{
          marginBottom: "4px"
        }}
      >
        🔁 Render count: {counter}{" "}
      </div>
      {listofAllSongsInTheWorld.map((song) => {
        return (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "0 10px 10px 10px"
            }}
          >
            <div
              key={song.name}
              style={{
                textAlign: "left"
              }}
            >
              <div>{song.name}</div>
              <div
                style={{
                  fontSize: "10px",
                  color: "#777777"
                }}
              >
                {song.artist}
              </div>
            </div>
            <div>
              {addedSongs.find((s) => s.name === song.name) ? (
                <button disabled>✅ Added</button>
              ) : (
                <button onClick={() => addSongToPlaylist(song)}>Add</button>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

```

```js
styles.css
.App {
  font-family: sans-serif;
  padding-bottom: 50px;
}
```

</Sandpack>

*Notice L9 and L16 in App.js for more information about the implementation.*

Woah!! The render count is now unaffected as many a time we type in the input. It only gets
updated when we add a song to the playlist which is expected. ✨

Thanks for the read, have a great one! 👋🏼


I've seen React devs ignore application performance on the browser until it becomes a UI bottleneck. The fact that your child components will re-render when the parent does, causing a chain reaction of re-renders, will slow your UX down. We will learn about a very simple yet counter-intuitive trick that would prevent your child components to re-render.

A slick trick to prevent unnecessary component re-renders


Ideally, you would always want users to use the latest version of your application. Having an interactive experience which speaks to the user when an update is available,
please refresh to view the fresh changes is what our requirements were at ツ Toplyne. I'll walk you through my experience of building such a system.

# Gathering requirements

The requirements are:

- Check if a new update is available for the app, show a notification saying "A new version of the app is available, REFRESH?".

![update-notification](https://i.ibb.co/w6mMVLH/Screenshot-2022-03-04-at-12-14-02-AM.png)

- When the user navigates, check if there is a new version and manually update the page (this is a rather opinionated approach which works perfectly as per our use case, we do not suprise users with a reload, we show the above notification first, if users do not refresh themselves, we do it for them on a subsequent page navigation).
  This is pretty easy to do once the previous requirement is in place.

🔮 We did leverage the PWA (Progressive Web App) feature that comes with a React app. Using this, we get to
use the superpowers of a service worker. Some notable features of service workers are:

- runs in the background independent of main js thread
- can be used to cache static assets and network requests
- can be paired with workbox to make your app run in offline mode

In our case, we utilised a service worker to check for updates periodically and made use of the service worker's update event
to show notification and/or update the app. You can read more about the service worker life cycle [here](https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle). Learning about
the lifecycle is crucial in understanding the what, when and why and how to override the default behaviour.

![Service worker lifecycle](https://hasura.io/blog/content/images/downloaded_images/strategies-for-service-worker-caching-d66f3c828433/1-HUnu3nbBSq2lDoOSllBkiA.png)
_image credits: hasura.io_

# Enough talk, show me the code already

We had disabled the default service worker that comes with CRA, so we had to add it manually. Adding this boilerplate is quite straight forward.
Use the cra-template-pwa and copy whatever you need. Generally, it's the workbox dependencies in `package.json`, `service-worker.js`, `serviceWorkerRegistration.js`.

```js
npx create-react-app my-app --template cra-template-pwa-typescript
```

These files contain the basic logic for registering a service worker in your browser. Ideally, you'd import the
serviceWorker from `serviceWorkerRegistration.js` and call the register method on it in an suitable location/component.
By default, it is `index.js`, you can move it to wherever you like but the component should always render.

> For my use case, I moved it to App.tsx to make use of React state and effects which would provide
> helpers to solve our use cases.

## Checking for updates and showing a notification

This is our first task. We need to periodically check for updates and if there are some update found,
show the notification to refresh the page.

The workflow is:

1. poll periodically to check for sw (short for service worker) updates by calling sw's `update()` function. Update the default service worker
   registeration in `serviceWorkerRegistration.js` file. This happens in a separate thread and is non blocking to the main js thread, so calling `setInterval()` should be okay.

```js
navigator.serviceWorker
    .register(swUrl)
    .then((registration) => {
  +    // check for updates periodically
  +    // every minute
  +    setInterval(() => {
  +      registration.update();
  +      console.debug('Checked for update...');
  +    }, 1000 * 60 * 1);
      registration.onupdatefound = () => {
```

2. When we call the `update()` method, it will compare new and older versions and if they are even a little bit different, it installs the new worker on the browser.
   When a new worker is found, the default behaviour is to **not** replace the old worker straight away, this is done for obvious reasons so that user interaction doesn't get ruined. The new
   worker goes into a forever waiting phase until the old worker is invalidated (usually 24 hours/ hard refresh/ closing tabs and opening).

![waiting-service-worker](https://i.ibb.co/80dg6v1/Screenshot-2022-03-04-at-3-37-53-PM.png)

3. We need to manually tell it to skip_waiting and take control.. We do this by adding a custom event listener to the service worker to listen for custom messages. Add the following at the end of `service-worker.js` file.

```js
// This allows the web app to trigger skipWaiting via
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});
```

> this step is very important because it allows us to hook custom handlers to control the lifecycle
> of a service worker according to our needs.

# Putting everything in order, showing the update notification

I've written a custom hook 🚀 `useServiceWorker.ts` which initialises the service worker registeration
and exposes functions to control the visibility of our notification alert.

```js
import { useState, useCallback, useEffect } from "react";
import * as serviceWorkerRegistration from "../serviceWorkerRegistration";

export const useServiceWorker = () => {
  const [waitingWorker, setWaitingWorker] = useState<ServiceWorker | null>(null);
  const [showReload, setShowReload] = useState < boolean > false;

  // called when a service worker
  // updates. this function is a callback
  // to the actual service worker
  // registration onUpdate.
  const onSWUpdate = useCallback((registration: ServiceWorkerRegistration) => {
    setShowReload(true);
    setWaitingWorker(registration.waiting);
  }, []);

  // simply put, this tells the service
  // worker to skip the waiting phase and then reloads the page
  const reloadPage = useCallback(() => {
    waitingWorker?.postMessage({ type: "SKIP_WAITING" });
    setShowReload(false);
    window.location.reload();
  }, [waitingWorker]);

  // register the service worker
  useEffect(() => {
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://cra.link/PWA
    serviceWorkerRegistration.register({
      onUpdate: onSWUpdate,
    });
  }, [onSWUpdate]);

  return { showReload, waitingWorker, reloadPage };
};
```

> When a service worker update is found, we store it as a `waitingWorker`. This gives us the control over calling
> `SKIP_WAITING` manually whenever we need to (in our case it's on clicking of REFRESH button on the update notification).

# How and where to show the notification

I've used this custom hook in my App entrypoint `App.tsx`. You can use it wherever you want to, but the
component should always render and better be a parent to all your child components.

```js
// App.tsx
const { waitingWorker, showReload, reloadPage } = useServiceWorker();

// decides when to show the toast
useEffect(() => {
  if (showReload && waitingWorker) {
    showToast({
      description: (
        <div>
          A new version of this page is available
          <button onClick={() => reloadPage()}>REFRESH</button>
        </div>
      ),
    });
  } else closeToast();
}, [waitingWorker, showReload, reloadPage]);
```

_and that's it....._

# Considerations

There are a lot of things you need to take care of when you're testing a service worker deployment.
Deploying a buggy service worker can ruin your app experience and these things ar every hard to get rid of
since they exist on the client's browser and take a long time to get invalidated. So consider the following
points before deploying your new feature:

- sw gets enabled on the production build of react, so its useless testing it on dev. You wouldn't want to test on dev as it leads to issues with hot reload and default caching mechanisms there.
- service worker can cache your static assets, you don't need to add cache rules for js, css, images in your deployment service manually.
- _(Very Important!!)_ Make sure not to cache your sw on your deployment service, else your new sw will never get installed, and you might never see a notification.
  Make sure your `service-worker.js` file has `Cache-Control` headers set to
  `max-age=0,no-cache,no-store,must-revalidate`.
  Read more about these headers [here](https://hasura.io/blog/strategies-for-service-worker-caching-d66f3c828433).
- create-react-app includes a service worker by default and makes your app work offline by default.
- _(Very Important!!)_ if you do run into issues with deployed service workers, push a release with calling `unregister()` to the sw and restore `Cache-Control` headers.
- You sometimes may get an error in production that says "Failed to update a ServiceWorker for scope ('hostname/') with script ('hostname/service-worker.js'): An unknown error occurred when fetching the script.".
  This happens when you push a release and at the moment when your app
  is building your sw checks for an update. This is a harmless thing and your app works fine on next update check. (We're currently figuring out what you can do to gracefully handle this error).

A lot of apps use service workers now a days and it acts as a very useful tool if used correctly. With great power comes great responsibility. Peace out! ✌️

<div
  style={{
    width: "100%",
    height: 0,
    paddingBottom: "54%",
    position: "relative",
  }}
>
  <iframe
    src="https://giphy.com/embed/MCZ39lz83o5lC"
    width="100%"
    height="100%"
    style={{ position: "absolute" }}
    frameBorder="0"
    className="giphy-embed"
    allowFullScreen
  ></iframe>
</div>
<p style={{ marginTop: "12px" }}>
  <a href="https://giphy.com/gifs/MCZ39lz83o5lC">via GIPHY</a>
</p>

Lets implement a mechanism that automatically updates a React app when some new changes are pushed.