Recoil is the State Management Library for React they use at Facebook.
Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of state that components can subscribe to. Selectors transform this state either synchronously or asynchronously
Best to watch the talk from React Europe 2020 embedded above. It clearly explains why Recoil come to exist, and when & how to use it.
The past few weeks I’ve been enjoying the newsletter of Remix, an yet to be released React Framework
Remix is a web application framework for React from the authors of React Router: Michael Jackson and Ryan Florence. It provides APIs and conventions for server rendering, data loading, routing and more.
You can also read some of its details in their introductory post from two weeks ago. I really like this post, as they build up their code examples in a step-by-step manner. In that post they cover their approach to:
File System Routing
Meta Tags and Document Titles
Remix will be a paid product. Next to a Commercial License they’ll also provide an Affordable Indie License.
useWorker() is a js library (with typescript support) that allows you to use the Web Worker Web API, through React Hooks. This library allows you to run the expensive function without blocking the user interface, using a simple syntax that makes use of Promise
React internally already optimizes the performance quite a bit without having to explicitly optimize for performance. React.memo can help you to optimize the number of renders of your React components even further.
In this article I will explain to you how you can optimize React performance by using React.memo, some common pitfalls you could encounter and why you shouldn’t always use React.memo.
Throughout the process, we anchored our work around two technical mantras:
As little as possible, as early as possible. We should deliver only the resources we need, and we should strive to have them arrive right before we need them.
Engineering experience in service of user experience. The end goal of our development is all about the people using our website. As we think about the UX challenges on our site, we can adapt the experience to guide engineers to do the right thing by default.
🤔 A bit weird they named the CSS section “Rethinking CSS to unlock new capabilities” though, as they’re basically using CSS as it is meant to be used: use em for font-sizes so that users can zoom, use CSS Custom Properties for theming / dark mode, etc. #embracetheplatform
There is a sweet spot of React: in moderately interactive interfaces. Complex forms that require immediate feedback, UIs that need to move around and react instantly. That’s where it excels.
But there’s a lot on either side of that sweet spot.
The low performance parts don’t need to be React. Listing pages, static pages, blogs – these things are increasingly built in React, but the benefits they accrue are extremely narrow. A lot of the optimizations that are cropping up in these corners, things like bundle splitting, server-side rendering, and prerendering, are triangulating, essentially, what we had before the rise of React.
If you’re swinging the React hammer, everything looks like a <Nail />. A smart developer knows when to use it, and when not to use it.
But what if you didn’t have to choose? As Dan Abramov from the React team tweeted (be sure to read the whole thread):
Imagine a CRUD React app with routes — but with no client-side router. Imagine the JS code for most of your components is never shipped to the client — but you can sprinkle some interactivity where you want to. Imagine there was no “backend” because it would be your components.
useImmer(initialState) is very similar to useState. The function returns a tuple, the first value of the tuple is the current state, the second is the updater function, which accepts an immer producer function, in which the draft can be mutated freely, until the producer ends and the changes will be made immutable and become the next state.