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
color1 and then calls the
listNewColors() 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
ctx.req.headers.cookie) 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
fetch 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:
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
.babelrc file, add
"next/babel" 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
mapStateToProps and making sure all of the components that need access to the global state are exported with the
useSelector 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
this.state 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: