Simple Stateful React Apps with NextJS and Recoil

Image for post
Image for post
Image courtesy of Max Pixel

It’s my birthday, and I’ll spend it learning a new framework if I want to. Really, that’s actually what I did. Why? Because I never want to stop learning, and today it really paid off. I had heard about NextJS in passing, but I hadn’t had time to really look at it in depth. So when I had a Saturday to kill on my birthday, it was the perfect chance.

So what is NextJS? You can think of it as a framework to help bootstrap React applications to get you up and running quickly. More than that, though, it has made doing some advanced techniques in React, namely static and server-side rendering, really easy to do. If you aren’t aware of what these things are, that’s really ok. Most simple React applications don’t necessarily need them, but as you scale up to thousands or millions of users, you are going to want to optimize what you have to send to them (see https://nextjs.org/docs/basic-features/pages for more details on the types of rendering).

Starting a NextJS app is really simple, just using the create-next-app command:

The example switch is optional; I included it because it will create a sample page for you that includes links to the documentation. This command will output some commands you can use to run the project you just created:

When you take a look at the structure of what it creates, you will notice the first thing I really like about NextJS:

Other than the node_modules directory, there is really only some images, a simple package.json file and the corresponding lock file, and one index.js file. That’s it. You don’t need a lot of boilerplate files to create a NextJS app. The package.json is pretty short as well:

Just react, react-dom, and next. It’s wonderful to see that you don’t need 20 packages just to build the most basic app.

Now let’s look at that index.js file. This file is a little long, but it actually is mostly content:

Really, there was nothing too complex there, just a lot of JSX. When you run this and go to http://localhost:3000, it will serve the pages/index.js file as the content. Most React developers could start building off of this right away with almost no learning curve.

This is just the tip of the iceberg, but abstracting away a lot of the complexity of getting a React application off the ground is a big win. You can customize a lot of things that are happening under the hood, such as customizing Babel, so although it is simple to start, you aren’t entirely giving up your ability to fine tune things.

Now obviously, I titled this article using NextJS and Recoil. If you haven’t heard of Recoil, now is the time to start learning it. A lot of folks have used the builtin React useState hooks for component-level state or the useContext hooks for project-wide state. Or you may have used Redux for updating state based on dispatched actions. To me, Recoil is a nice framework that sits in the middle of these.

There is nothing wrong with using useState within a component for state that is local to that component. When you start to need shared state, you have a few options. The useContext option that comes built-in to React is not a bad option, but it requires the use of context providers that live at the root of your application and often require a lot of unnecessary re-rendering, so performance can slow down a lot the more you use it. Redux does a really good job of storing lots of state without sacrificing performance, but it is a little more complex and requires a number of files for even the most basic state requirements.

Recoil is a lot like useState, making it really simple. The difference is that when you use the useRecoilState hook, you give it a pointer to what is called an atom, which has the combination of a key and the default value. You get back the value and a setter, just like with useState. You can use that hook in many components to lookup and set the same state. Or you can use useRecoilValue to just lookup the value. Or you can use useSetRecoilState to just get a setter.

Recoil takes it a step further by allowing you to define selectors, which are basically derived state based on atoms or other selectors. In other words, you just update the value of one atom and any selectors that depend on it are automatically updated. Any components depending on that atom or any of its selectors is updated. You can store a total price in one place but display that price broken up in a variety of different ways based on selectors.

In order to demonstrate how easy it is to integrate Recoil into a project, I made a simple NextJS app that allows you to define counters. You give a counter a name and an initial value, and then you can increment or decrement that counter after it is created. You can add more counters and they will all be listed together. Recoil keeps track of the counters, and all I have to do is use the setter Recoil gives me to update the counters when something changes. It kind of looks like this (just basic css styling):

It’s getting late, so I put the code up at https://github.com/openshiftninja/nextjs-recoil-counters. I’ll write another article tomorrow that dives into the code, but it really should be simple enough for anyone who has been developing React for at least a few weeks.

Feel free to shoot me questions!

Written by

I'm a technology enthusiast, always searching for better ways of doing things. Lately that has been all things React. I also write a lot on Medium. :)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store