 Resources from Erik Aybar in 2024

No matter what type of app you’re building, you're going to need to fetch data, display it to a user, and enable the user to interact with and update that data. This interaction and updating phase is often asynchronous by nature which presents you, the developer, an opportunity to provide a range of different experiences depending on the scenario.

In some instances, you can leverage what is known as optimistic UI updates for an improved, snappier user experience compared to a traditional “loading/waiting” experience. They aren’t suited for every use case, but selectively making use of optimistic UI updates throughout your application can have a significant impact on the quality of user experience for relatively little cost and complexity!

In this course, we’ll walk through implementing optimistic UI updates in the real world example of liking and unliking a tweet. We'll use React's built-in state and make use of extracting setState updater functions to help manage and better define our setState usages. 

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

Optimistic UI Updates in React

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

ES6 (ES2015) introduces a [standardized module format](http://babeljs.io/docs/learn-es2015/#modules) to Javascript. We'll take a look at the various forms of defining and importing modules. Using [Webpack](http://webpack.github.io/) to bundle up our modules and [Babel](http://babeljs.io/) to transpile our ES6 into ES5, we'll put this new module syntax to work within our project. Then we'll examine how to import 3rd party packages from npm, importing [lodash](https://lodash.com/) with the `_` underscore alias using the ES6 module syntax.

ES6 Modules (ES2015) - Import and Export

Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

webstorm

In this lesson, we'll walk through installing a custom color scheme into our [WebStorm](https://www.jetbrains.com/webstorm/) IDE. Dayle Rees's [daylerees/colour-schemes](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) has a great collection of themes ready to install in different formats for various editors.

For this example, we will install the [Peacocks In Space](https://github.com/daylerees/colour-schemes/blob/master/jetbrains/peacocks-in-space.icls) theme into an OS X [WebStorm 11 EAP](https://confluence.jetbrains.com/display/WI/WebStorm+EAP) installation. _Note: This process will be very similar (or identical) for previous versions of WebStorm and other editors in the [JetBrain's family of editors](https://www.jetbrains.com/)._

WebStorm - Installing Custom Color Schemes (dayleress/colour-schemes)

By making use of [closures and lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), we can achieve "private" properties by returning objects with methods from a factory function. By defining our desired "private" variables within our factory function and accessing these variables from within our returned object's methods we create a closure and maintain unique, separate references to our "private" variables.

"Private" Variables with Closures and Factory Functions

Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

immutable

By utilizing immutable data structures, we can write code that is easier to reason about, avoid mutation-related bugs, reduce complexity, and even gain some performance benefits along the way.

Before diving too far into Facebook's [Immutable.js](https://facebook.github.io/immutable-js/) library, let's take a moment to examine some of the pains and obstacles that mutable data structures present. 

We'll take a brief glimpse at putting the Immutable "List" data structure to work by example. We will convert our usage of Javascript's native `Array` to use [Immutable.List](https://facebook.github.io/immutable-js/docs/#/List) in order to address a mutation-related "bug" caused by multiple objects "sharing" a mutable structure (array) by reference.

Immutable.js: Introduction - Easing the Pains of Mutability

In this video we'll learn how to perform common add and remove array operations such as append, prepend, insert, and remove. We'll look at the dangers of mutation that can be caused by using mutative array methods such as [Array.prototype.push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) and learn how to instead leverage non-mutative array methods such as [Array.prototype.concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) and [Array.prototype.slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) when working with arrays.

Add and Remove Array Items with JavaScript concat() and slice() to Avoid Mutation

In this video, we take a quick look at refactoring usages of [Array.prototype.concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) to make use of the [ES6 array spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). For example, we can refactor towards simple append and prepend statements such as `[...array, value]` or `[value, ...array]` or combine multiple spread operations to achieve insert via `[...leftSide, value, ...rightSide]`.

Bonus tip: `[...someArray]` can be used to quickly make a shallow copy of an array to avoid mutation for many common array operations.


Refactor Array concat() Operations to Use the ES6 Spread Operator

In this lesson we will look at updating state in React based on the successful resolution of a promise making use of [Promise.prototype.then](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then). We will perform a user action such as clicking a button to delete an item and fire off a request to our API. Once our request is complete, we will update our [component state](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) based on current state using [`setState()` with an updater function](https://reactjs.org/docs/react-component.html#setstate) and remove the target item from the list with [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).

Update state asynchronously in React using Promise and setState()

In this lesson we will add state to our component to indicate whether we are loading to the user. We will "begin loading" before submitting our request to an API and then set "end loading" once the request is complete using [Promise.prototype.then](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) and [`setState()`](https://reactjs.org/docs/react-component.html#setstate). This gives users a better experience than being left hanging wondering if their action of clicking the button had any effect. Now they will at least have some indication that work is being done while the request is in progress.

Add a loading indicator to UI for request in progress using setState()

In this lesson we will account for errors encountered during a failed requests and display a helpful error message to the user. We will add a `catch()` handler ([Promise.prototype.catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch)) to our request's promise where we will add an error message to component state and set our loading state to false. We'll add an error message to our app that will only display once an error has occurred using [conditional rendering](https://reactjs.org/docs/conditional-rendering.html).

Handle a rejected promise and display error to user using setState()

In this lesson we will refactor an existing UI update from a typical _loading_ approach to an _optimistic UI update_ approach to give our users a faster, more snappy experience. Instead of displaying a "loading" UI to our users while our request is in progress, we will immediately update the UI and account for reverting state and displaying an error in the event of a failure. We can accomplish this relatively easily in React, thanks to the simplicity and power of [`setState()`](https://reactjs.org/docs/react-component.html#setstate) combined with making use of Javascript's [lexical scoping and closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).

Optimistic UI update in React using setState()

The term "optimistic UI update" refers to the approach of immediately updating UI to reflect user actions rather than waiting for a success response from a server. This also requires reverting state in the event of a failure. A real-word example of optimistic UI updates in action is liking and unliking a tweet on Twitter. You can see this yourself by going to Twitter on their desktop web client, opening your devtools, enabling "Offline" in the "Network" panel, and liking a tweet.

In this video, we'll compare the look and feel of non-optimistic UI updates with their optimistic equivalent and introduce the liking and unliking a tweet example we'll be building.

Optimistically Update UI for a Snappier User Experience

We'll add a method to our [class-based React component](https://reactjs.org/docs/react-component.html) and immediately update state _before_ firing off our request. Using a [setState updater function](https://reactjs.org/docs/react-component.html#setstate), we will update component state based on previous state and toggle the "liked" status of a tweet upon the user clicking the heart icon. We will simultaneously increment or decrement the target tweet's `likes` property and appropriately add or remove the `tweetId` from the `likedTweets` array.

Optimistically Update Multiple Values in State Using React's setState

React's setState accepts an [updater function](https://reactjs.org/docs/react-component.html#setstate) that given current state returns new state. To better define and manage our setState usages, we can extract our inlined setState function to a setState updater factory. This enables us to give it a descriptive name, define required arguments, and ease future reuse, refactoring and composition for updating component state in our application.

Refactor Inlined React setState Function to a setState Updater Factory

Our initial, simplified approach may be fine for many scenarios, but is not the most robust solution. By simply taking a snapshot of current state (our list of items) and restoring it after a failure, we’ve left the potential for inconsistent state due to the fact that between taking the snapshot and failure, the user could have performed additional actions.

One solution is to, instead of taking a snapshot of our entire list of items, take a snapshot of the target item and use that upon failure to more precisely restore the individual item to state. This eliminates the possibility of incorrectly restoring items to state which have been successfully deleted.

Restore Target Items in React State for Improved Optimistic UI Updates

A crucial part of implementing optimistic UI updates is properly handling failure cases. In the event of a request failing, we must revert the state which we’ve already updated since we assumed success at the time of user interaction. Thanks to the simplicity and power of [setState()](https://reactjs.org/docs/react-component.html#setstate) combined with Javascript's [lexical scoping and closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), we can accomplish this relatively easily in React.

Revert State On Request Failure using React setState and Closures

Optimistic UI updates come with challenges that can vary for every use case. In our scenario of “liking a tweet”, one challenge that we face is preventing doubly updating and reverting state in the event of the user clicking “like” in rapid succession. In the case of a request failure our current solution results in the false impression that the tweet was successfully liked. 

One solution that fits our use case is to simply raise and lower a boolean flag to indicate whether a like tweet request is pending or not and short circuit our `onClickLike` method to "do nothing" if a request is already pending. Since we don’t require this information in our render method or on component state, we can simplify this further by making use of a class instance property to store this value.

Prevent Doubly Updating and Reverting State in React

A brief overview of the course to give you a preview and feel for what we'll be learning and working towards.

Course Overview: Optimistic UI Updates in React

Most of the applications we use day to day have optimistic UI updates sprinkled throughout them if you look close enough. One familiar example we'll examine and use as an example throughout this course is liking and unliking a tweet on Twitter. In this video, we'll take a peek under the hood of https://twitter.com/ using [Google Chrome's DevTools Network panel](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference). We'll mimic a slow 3g network to slow things down and get a feel for exactly when the optimistic UI updates are occurring and when the UI state is reverted upon failure.

Examine Real World Optimistic UI Updates

In this video, we'll walk through accomplishing the common UI task of client-side pagination in React. We'll implement a render prop component to encapsulate the chunking/windowing logic of a large array of items that will provide our render prop function with the correct items for the current page. Our `Paginate` render prop component will not have any opinion or knowledge relating to UI and will only be responsible for providing our render prop function with the relevant data that it needs to render the current items along with our pagination.

Related reading from the React docs: [Use Render Props for Cross-Cutting Concerns](https://reactjs.org/docs/render-props.html#use-render-props-for-cross-cutting-concerns)

Topics

Instructors

Content Type

Erik Aybar