---
title: Build a New Relic app with React hooks
source: https://docs.newrelic.com/docs/new-relic-solutions/tutorials/build-react-hooks-app
---

Starting with version 2.49.1 of our `nr1` CLI, you can build New Relic applications and custom visualizations with [React hooks](https://react.dev/reference/react/hooks). This guide gives some Nerdlet examples of React hooks in action!

## Before you begin

Developing Nerdpacks requires a New Relic account and the New Relic CLI, `nr1`.

If you haven't already:

-   [Sign up](https://newrelic.com/signup/) for a New Relic account
-   Install [Node.js](https://nodejs.org/en/download/)
-   Complete the [CLI quick start](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==)

Now, you have a Nerdpack, called `my-awesome-nerdpack`. This Nerdpack has a Nerdlet and a launcher that you named (though, this guide uses the default launcher name, "launcher", and Nerdlet name, "home"). You use this Nerdpack throughout this guide.

Finally, make sure your `nr1` is up-to-date. This guide requires a minimum version of 2.49.1:

```sh
nr1 update
nr1 version
[output] @datanerd/nr1/{purple}2.49.1{normal} darwin-x64 node-v14.15.1
```

> #### 💡 TIP
>
> If you use VSCode, we have an [extension](https://marketplace.visualstudio.com/items?itemName=new-relic.nr1) and an [extension pack](https://marketplace.visualstudio.com/items?itemName=new-relic.new-relic-extension-pack) you can use to build your app.

```jsx fileName=index.js
import React from 'react';

export default class HomeNerdlet extends React.Component {
  render() {
    return <h1>Hello, home Nerdlet!</h1>;
  }
}
```

## Update and serve your application locally

With `nr1`, you can serve a local build of your Nerdpack to New Relic. This helps you develop your application in a production-like environment before you publish it.

Before you change any code, familiarize yourself with the Nerdpack's directory structure:

```txt lineHighlight=3-10,12
my-awesome-nerdpack/
├───README.md
├───launchers/
│   └───launcher/
│       └───nr1.json
├───nerdlets/
│   └───home
│       ├───index.js
│       ├───nr1.json
│       └───styles.scss
├───node_modules/
├───nr1.json
├───package-lock.json
└───package.json
```

The _launchers_ and _nerdlets_ directories contain the logic of your application. It's in these directories that you update most of your code. The _nr1.json_ files throughout the Nerdpack hold metadata about your Nerdpack, Nerdlets, and launchers.

> #### 💡 TIP
>
> Read [our documentation](https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/nerdpack-file-structure/) to learn more about the Nerdpack file structure.

1.  In _my-awesome-nerdpack/nerdlets/home/index.js_, change the _HomeNerdlet_ class to a function:
    ````jsx fileName=index.js
    import React from 'react';

    function HomeNerdlet () {
        return <h1>Hello, home Nerdlet!</h1>;
    }

    export default HomeNerdlet
    ```

    ````
2.  Next, return a Billboard chart instead of a header:
    ````jsx fileName=index.js
    import React from 'react';
    import { BillboardChart} from 'nr1'

    function HomeNerdlet () {

      const clickCount = {
        metadata: {
            id: '1',
            name: 'Count',
            viz: 'main',
        },
        data: [
          { "y": 10 }
        ]
      }
      return <BillboardChart data={[clickCount]}/>
    }

    export default HomeNerdlet
    ```

    <br/>

    For now, you're showing a static value in your Billboard chart, but in later steps, you supply a dynamic value using the function's local state.

    ````
3.  If you're not already, serve your application from the root directory of your Nerdpack:
    ````bash
    nr1 nerdpack:serve
    [output] Found and loaded {success}2 {plain}nr1.json files on MyAwesomeNerdpack ({purple}aad7ebb6-8901-43d0-a681-0719b2c60a11{plain}) Nerdpack.
    [output]
    [output] {purple}Nerdpack:
    [output]  {success}✔  MyAwesomeNerdpack {plain}({purple}aad7ebb6-8901-43d0-a681-0719b2c60a11{plain}) {blue}nr1.json
    [output]
    [output] {purple}Launchers:
    [output]  {success}✔  launcher {blue}launchers/launcher/nr1.json
    [output]
    [output] {purple}Nerdlets:
    [output]  {success}✔  home {blue}nerdlets/home/nr1.json
    [output]
    [output] There is no certificate created yet.
    [output]  {success}✔  {plain}New certificate created.
    [output]
    [output] Webpack bundle analyzer is enabled (you need to wait for the first build to finish)
    [output]  └  You can head to {blue}http://127.0.0.1:27888
    [output]
    [output] {blue}NOTE: {plain}To verify how your assets will look in production, you need to
    [output]       add "--mode=prod" when starting the development server.
    [output]
    [output] 🛠  Built artifact files for:ex.js...
    [output]  ⁎  {purple}aad7ebb6-8901-43d0-a681-0719b2c60a11--home {plain}built {success}✔
    [output]
    [output]  {success}✔  {plain}Nerdpack built successfully!
    [output]  {yellow}★  {plain}Starting as orchestrator...
    [output]
    [output]  {success}✔  {plain}Server ready! Test it at: {blue}https://one.newrelic.com/?nerdpacks=local
    [output]  {blue}↩  {plain}Server will reload automatically if you modify any file!
    [output]
    [output]  {blue}ℹ  {plain}Additionally, you can test the following artifacts at:
    [output]
    [output] {purple}Launchers:
    [output]  ⁎  {success}launcher {blue}https://onenr.io/0z7wkEkMnjL
    [output]  {blue}ℹ  {plain}You can use "npm start -- --mode=prod" to run the development server in prod mode.
    ```

    ````
4.  Use the url at the bottom of the output to open your launcher:
    ````bash
    [output] {purple}Launchers:
    [output]  *  {success}launcher {blue}https://onenr.io/0z7wkEkMnjL
    [output]  {blue}ℹ  {plain}You can use "npm start -- --mode=prod" to run the development server in prod mode.
    ```

    ````
5.  Here, you see your Nerdlet with your Billboard chart showing the number "10":
    ![Static billboard chart in the browser](https://docs.newrelic.com/images/react-hooks-screenshot-static-billboard-local.webp "Static billboard chart in the browser")

Leave your server running, as it will automatically reload your Nerdlet when you modify its files.

## Use the `useState()` hook in your Nerdlet

Previously, you used a static value for your Billboard chart. Now, you use your function's local state to store a dynamic value and show that value in the chart.

1.  In _my-awesome-nerdpack/nerdlets/home/index.js_, call `useState()` in your function component:
    ````jsx fileName=index.js
    import React, {useState} from 'react';
    import { BillboardChart} from 'nr1'

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

      const clickCount = {
        metadata: {
            id: '1',
            name: 'Count',
            viz: 'main',
        },
        data: [
          { "y": 10 }
        ]
      }
      return <BillboardChart data={[clickCount]}/>
    }

    export default HomeNerdlet
    ```

    <br/>

    Here, you call `useState()`. This hook returns two values, which you capture in an array:

    * `count`: The current value in local state. Its default value is 0, the argument you passed to `useState()`.
    * `setCount`: A function you use to update `count`

    ````
2.  Change your Billboard chart data to use `count`:
    ````jsx fileName=index.js
    import React, {useState} from 'react';
    import { BillboardChart} from 'nr1'

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

      const clickCount = {
        metadata: {
          id: '1',
          name: 'Count',
          viz: 'main',
        },
        data: [
          { "y": count }
        ]
      }
      return <BillboardChart data={[clickCount]}/>
    }

    export default HomeNerdlet
    ```

    <br/>

    Right now, the value of count will be `0` on every render because you never update the state. You need a way to do that.

    ````
3.  Alongside your chart, render a button to increment `count`:
    ````jsx fileName=index.js
    import React, {useState} from 'react';
    import { BillboardChart} from 'nr1'

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

      const clickCount = {
        metadata: {
            id: '1',
            name: 'Count',
            viz: 'main',
        },
        data: [
          { "y": count }
        ]
      }
      return (
        <div>
          <BillboardChart data={[clickCount]}/>
          <button onClick={() => setCount(count + 1)}>
            Increment count
          </button>
        </div>
      );
    }

    export default HomeNerdlet
    ```

    <br/>

    Here, you added a button to your Nerdlet that increments the count by 1 every time you click it.

    ````
4.  Move to your browser that's running the Nerdlet to see your changes:
    ![Increment count with button click](https://docs.newrelic.com/images/react-hooks-screenshot-button-increment.webp "Increment count with button click")
    Click the button a few times to increment the count.

## Use the `useEffect()` hook in your Nerdlet

Your Nerdlet now has a Billboard chart and a button. The chart shows the number of times you clicked the button. Use `useEffect()` to automatically increment `count`.

1.  In _my-awesome-nerdpack/nerdlets/home/index.js_, create an effect:
    ````jsx fileName=index.js
    import React, {useState, useEffect} from 'react';
    import { BillboardChart} from 'nr1'

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

      useEffect(() => {
        setTimeout(() => {
          setCount(() => count + 1);
        }, 1000);
      });

      const clickCount = {
        metadata: {
            id: '1',
            name: 'Count',
            viz: 'main',
        },
        data: [
          { "y": count }
        ]
      }
      return (
        <div>
          <BillboardChart data={[clickCount]}/>
        </div>
      );
    }

    export default HomeNerdlet
    ```

    <br/>

    `useEffect()` automatically increments the `count` value every 1 second. Since you automated the count, you also removed the increment button.

    ````
2.  Move to your browser to see the updates:
    ![Auto increment with Effect Hook](https://docs.newrelic.com/images/react-hooks-screenshot-auto-increment.webp "Auto increment with Effect Hook")

## Summary

In this guide, you learned how to:

-   Create a local New Relic Nerdpack
-   Use hooks in your Nerdpack