I’m setting state in my app and referencing it. Why don’t I see the new values?

Fortunately, if you’ve run into a similar issue, there’s a simple solution and an important lesson about React state to learn along the way.

The main takeaway: Setting React state is an asynchronous process.

To better understand, let’s look at the following component:

All that’s happening here is two names of colors being displayed. There’s a button below that — when clicked — updates the state of and then calls the function. …

The other day I was working on authenticating some pages in Next.js using cookies that stored a token. When a user logins in, a JSON Web Token is generated and stored as a cookie. My protected pages are wrapped by a Higher Order Component which first verifies the cookie (accessed on ) before rendering the wrapped component.

Getting from the login screen to the home page worked great! Theoretically from my splash page, I should have now access to any of the components in the navigation, since they’re all wrapped by the same Higher Order Component, right?.

I’ll explain the Pokemon in a minute. But first, we all agree unit testing is not the most fun! Particularly testing API requests. However, I recently discovered Mock Service Worker, a simple and efficient way of mocking and in testing. Simple because of the way it integrates into applications, and efficient because it operates at a network level, making it function synonymously with an actual mocking server.

Taken from the npm documentation, here are some of the ways MSW behaves differently than other mocking libraries:

  • Intercepts requests on the network level, not the application level.
  • If your think…

Next.js is a popular React framework for server-rendered applications. Jest is a popular framework for writing unit tests. So I was quite surprised how difficult it was finding a solution on the web for how to prepare Jest with my Next.js application. Turns out it’s fairly simple to prepare. Let’s look at the configuration files you need to add.

These are the dev dependencies you will need for the setup:

If you haven’t already, go ahead and add these files to the root of your app:

Inside of the file, add to the presets:

Redux is a popular library for managing the global state in your application. However, it can get a bit weedy when it comes to and making sure all of the components that need access to the global state are exported with the function.

and are Redux hooks which can simplify these processes. Like with other React hooks, these can only be used in functional components, not class components. Let’s showcase these in a simple counter.

Concepts covered: Next.js, Node.js, JWT, Cookies, React HOC

Authentication is a challenge, and implementing it from server-side rendered (SSR) applications adds some additional twists!

For this example, we’ll have a login screen that redirects to a home page when a user is authenticated. If you would like to follow along, the file structure and npm dependencies are on the left. This article assumes you are familiar with Express route handling and the axios library.

Take a look at the flowchart below which shows when endpoints in the Node layer are called, when a cookie is set, and when the higher…

Using React’s useState hook is an effective way to toggle between states in your functional components. According to the React documentation, it’s a great way to “use the exact same capabilities that provides in a class”. If you are new to React hooks, these can only be used in functional stateless components as opposed to class-based components.

Below is a tiny example built with create-react-app and looks something like this:

Nate Gage

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