Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
React is becoming a black box
It pains me to say it, but React on the verge of becoming a black box. On any given day, just search “React hooks” or “React Concurrent Mode” on Twitter and you’ll inevitably stumble upon a conversation that goes something like this:
Not many folks are talking about it publicly, perhaps for fear of embarrassment or exposing their lack of knowledge, but recent Twitter banter over the last few months as well as conversations I’ve had with a handful of “thought leaders” have made it clear that very very few people in the community understand how React works now. I hope I am wrong, but I am very concerned that forthcoming Concurrent Mode is going to make React even more difficult to reason about.

Read more
Build A Confirmation Modal in React with State Machines

Ever needed to wire up a confirmation dialog in React? You know the ones: “Really delete this file? — Yes / Cancel”

These dialogs tend to follow a consistent pattern:

  • User tries to do dangerous/destructive action
  • Modal pops up asking if they’re really really sure
  • On Cancel: hide the modal, do nothing
  • On Confirm: do the action, and then hide the modal after the action is done

I worked on an app that had a need to protect dangerous actions like Delete, in a few places across the app.

The asynchronous nature of the flow (Confirm, wait until done, then close) meant that there would be plenty of finicky useEffect code to show and hide the modal, wait for the async API call to finish before hiding it, and so on.

Or… could I avoid useEffect entirely by using a state machine?

It turned out the answer was yes!

In this article we’ll build a reusable state machine using React and Robot to handle this modal confirmation flow, and wrap it up into a custom hook.

Read more
James Porter - MobX State Tree is better than Redux

Watch video
Next.js: Server-side Rendering vs. Static Generation
Next.js is a React framework that supports pre-rendering. Instead of having the browser render everything from scratch, Next.js can serve pre-rendered HTML in two different ways.
With Server-side Rendering (SSR), Next.js pre-renders the page into HTML on the server on every requestTTFB (Time to first byte) is slower, but your data is always up-to-date.
With Static Generation (SSG), Next.js pre-renders the page into HTML on the server ahead of each request, such as at build time. The HTML can be globally cached by a CDN and served instantly.
Static Generation is more performant, but because pre-rendering happens ahead of time, the data could become stale at request time.
Fortunately, there are ways to work around this issue without rebuilding the entire app when the data is updated. With Next.js, you can use Static Generation for maximum performance without sacrificing the benefits of Server-side Rendering.
In particular, you can use:
  • Incremental Static Generation: Add and update statically pre-rendered pages incrementally after build time.
  • Client-side Fetching: Statically generate parts of the page without data, and fetch the data on the client-side.
To demonstrate, let’s use a hypothetical e-commerce Next.js app as an example.

Read more
Storybook Tutorials
Learn to develop UIs with components and design systems.

Free in-depth guides for professional frontend developers. Made by Storybook maintainers.

Read more
How to use React Ref
Using React ref and really understanding it are two different pair of shoes. To be honest, I am not sure if I understand everything correctly to this date, because it's not as often used as state or side-effects in React and because its API did change quite often in React's past. In this React Ref tutorial, I want to give you a step by step introduction to refs in React.

Read more
React video courses
Because I need to pay my bills 😉
Copyright © 2020 ABL - The Problem Solver, All rights reserved.

unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp