 Resources from Yoni Weisbrod in 2024

In this free collection on Facebook's new state management library, we'll get started using Recoil in our React applications and then delve into various common use cases that we may encounter in the field.

We'll start with the basics of state management in Recoil: the Atoms and Selectors. Then we'll dive further into the Selector API, an important part of the library. Along the way we'll learn different strategies for handling synchronous and asynchronous Selectors.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Manage React State with Recoil

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Speed up your Sublime Text workflow by creating snippets out of boilerplate code. Sublime Text snippets are smart, configurable, and prevent repetitive typing.

Use Sublime Text Snippets to Avoid Repetitive Typing

Optional Chaining provides a safe way to handle situations where you don't know whether specific properties exist on a given object. Rather than resorting to long conditional logic or nested ternaries, optional chaining is a concise way to only access properties if they exist - and if they don't, to return undefined rather than throw an error.

Please note: This feature is still making its way through the TC39 proposal process. To use it in your project today, you can enable it using [Babel's Optional Chaining plugin](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining).

Use Optional Chaining to Safely Handle Objects with Unknown Properties

The nulliish coalescing operator (`??`) allows us to be more explicit when setting object defaults. It allows us to ensure that only values that are "nullish" (either null or undefined) cause the default value to be taken, rather than anything that evaluates to false.

It's a safer way to operate.

Please note: This feature is still making its way through the TC39 proposal process. To use it in your project today, you can enable it using [Babel's Nullish Coalescing plugin](https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator).

Use the Nullish Coalescing Operator to Set Object Defaults

Next.JS works with any CSS-in-JS solution, including Styled Components. But to get it working with Next.JS's server-side rendering, you'll need to do some configuration.

In this lesson I go through the steps required to get it working properly, including adding `babel-plugin-styled-components` to your project and overriding the `Document` page to inject your styles into the `<Head>` of the page.

For reference, please see Styled Components' [guide to SSR](https://www.styled-components.com/docs/advanced#server-side-rendering), and the Next.JS [sample repository for Styled Components](https://github.com/zeit/next.js/tree/master/examples/with-styled-components).

Add Styled Components to a Next.JS Project

In this lesson, we're going to show how RecoilJS selectors are used to display computed data in React. While atoms are the go-to state objects in Recoil, selectors are the ideal choice when data can be computed based on existing state - like displaying the price of a restaurant order. And your selector output always remains up to date - just subscribe to it using one of the RecoilJS hooks.

Display Computed Data Using Recoil Selectors in React

In this lesson, we'll dive right into creating custom functions for Google Sheets. Guess what? All you need is JavaScript! 

We'll talk about how to create custom functions, how to call them, and how to declare in which cells your data will be presented using the Google Sheets two-dimensional array syntax.

Create Custom JavaScript Functions for Google Sheets

Learn how to set state in Recoil using the `useRecoilState` hook. 

Sound familiar? It should, because it works very similarly to React's built-in `useState` hook (the functional component equivalent of `setState`).

In this lesson, we'll practice removing and adding items from an array that we keep in state using a Recoil atom. We'll create new immutable functions, and then call our setter functions in order to update the state.

Update Recoil State in React using useRecoilState

In this lesson, we're going to learn how to create Recoil selectors that accept arguments. These are made possible using the `selectorFamily` utility function.

We'll start with an existing application that uses a regular `selector` to display a sorted array of Todo items, and then we'll refactor it so that we're able to supply the sort type (`ascending` or `descending`) in the React component itself.

For more information on `selectorFamily`, have a look at the official RecoilJS docs: https://recoiljs.org/docs/api-reference/utils/selectorFamily


Use selectorFamily to take arguments in your Recoil selectors

Selectors are great for automatically triggering API calls with Recoil because they are automatically run as soon as any dependencies are updated, and because selectors are shared across your application.

Be aware that Recoil will cache your selector values, so asynchronous selectors are best utilized when the data is not meant to change throughout the life-cycle of an application. Fetching a user's avatar would be a good use case.

When writing asynchronous selectors, one thing to keep in mind is that React must always know what to render - even while your data is being fetched. One solution for this is to use Suspense, a React component that allows you to supply a fallback value to render until your data returns. In this lesson, we'll look at how to call APIs inside selectors and handle situations where selectors return promises.

Use Recoil Selectors to Make API Calls in React

When consuming asynchronous selectors in Recoil, you're going to need to tell React what to render while the API is fetching its data. 

One way to solve this issue is by setting a fallback value using React `Suspense`. But there's another option that gives you fine-grained control, and that's by preventing the selectors from returning a promise in the first place.

In this lesson we're going to have our selectors return Recoil's `Loadable` object, which always contains the current selector value (`contents`) and what state the selector is in (`state`). By consuming this with the `useRecoilValueLoadable` hook rather than the regular `useRecoilValue` hook, we can manually define whatever we want React to render in each of the 3 states: `hasError`, `hasValue`, and `loading`.

Handle Recoil Asynchronous Selectors using Loadables in React

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

In this lesson, we'll get up and running with React Native while installing the extension for MacOS. For current instructions, head over to the React Native for MacOS documentation site, which will point you in the direction of the latest version: https://microsoft.github.io/react-native-windows/docs/rnm-getting-started.

To run your new Mac application, run `npx react-native run-macos`. The first time you run this, it will take quite a while because project dependencies are being installed, but subsequent runs will go much quicker.

Create a new React Native for MacOS application

Recoil offers several hooks to use for consuming state in React, and this lesson looks at how to choose which hook to use, and what happens when you don't use the right hook (hint: **extra renders**).

The three basic RecoilJS hooks are:

1. `useRecoilState`, which is great for reading and writing state,
2. `useRecoilValue`, ideal for reading state, and
3. `useSetRecoilState`, the primary candidate when you just need to write state.

Choose the Right Hook for Your Recoil State

One of the fundamental aspects of Javascript is variable scope, and in this lesson we'll dive into how variable scope works when defining variables with `var`, `let`, or `const`.

The three main takeaways are:

1. Inner scope can always read values defined in an outer parent scope.

2. Outer scope **cannot** read values defined in an inner scope (except when defined with `var`).

3. The `var` scope-bleed issue can be overcome using immediately-invoked function expressions (IIFEs).

Use var, let, and const to Control Variable Scope in JavaScript

This lesson delves into the different ways in which variables and functions are hoisted in Javascript. Note that everything is hoisted but they're not all hoisted in the same way.

**Function declarations** are completely hoisted, so that you can always reference a function declaration before it's defined.

Variables declared with **var** are also hoisted, and their values are initialized to `undefined`. **let** and **const**, on the other hand, are hoisted, but they don't receive any initial value. This causes an area in the code where the interpreter is familiar with the variable, but it has not yet been initialized - known as the **Temporal Dead Zone** (or **TDZ**).

Topics

Instructors

Content Type

Yoni Weisbrod