Engineering · 6 min read

Why Fullstory uses Observables in React

Jordan Hurt
Posted July 19, 2023
Why Fullstory uses Observables in React

At Fullstory, the playback team has recently been working to migrate our session replay UI from an in-house templating framework to React. React offers many advantages over our previous framework, including better code reuse, an improved development experience, and declarative programming paradigms. 

However, React’s rendering lifecycle presents some unique challenges to building a performant session replay experience. In particular, it is difficult to optimize re-renders in an app that must update global state very frequently. 

To solve this problem, we decided to leverage Observables.

What are Observables?

Observables are a programming concept used for dealing with asynchronous or "streaming" data. They represent a data source that emits values over time. 

Observables are a fundamental concept in the Reactive Programming paradigm and are implemented in various libraries and languages, most notably in ReactiveX libraries, like RxJS for JavaScript, RxJava for Java, etc.

The example below defines an Observable and subscribes to it. The Observable pushes the value ”Hello” immediately (synchronously) when subscribed, pushes the ”, World!” value one second after the subscribe call, then completes:

JS Observables Example 1

This produces the following console output:

JS Observable Example Output

Observables may seem familiar to anyone who has used a Promise object’s .then() method. An Observable object’s .subscribe() method is similar because it also registers a callback to receive future values. However, there are key differences between Observables and Promises:

  1. An Observable can produce multiple values over time.

  2. An Observable does not execute until subscribe is called.

Observables allow us to declare side effects eagerly and subscribe to value streams lazily. This fact may not seem compelling on its own, but the real power of Observables comes from operators, which allow us to express complex dataflow pipelines declaratively through composition.

What are Operators?

In addition to the .subscribe() method, Observable objects also support a .pipe() method that can be used to compose functionality using operator functions. The .pipe() method takes one or more operator functions and returns a new Observable that passes each of its future values through the operators. 

To understand pipe, let’s first imagine an Observable of playback pages:

observable-playback

With the pipe method and a few operator functions, we can transform our page$ Observable into one that produces different values:

observable-playback-pipe

With just 3 lines of code, we’ve created a new isOnline$ Observable that emits a Boolean value indicating if a user is online, ignores duplicates, and defaults to false. Pretty cool, right?

TIP: Did you know that $ is a common suffix to denote an Observable?

But remember, an Observable doesn’t execute until .subscribe() is called. Using the .pipe() method returns a new Observable, but its values are not actually delivered until a Subscription is created via .subscribe().  As a result, Observables allow us to express and compose logic declaratively.

What is RxJS?

While Observables are a general pattern supported in many languages, RxJS is a specific Observable library for TypeScript. Several Observable libraries exist for TypeScript, but RxJS is clearly the most popular. With over 46 million weekly downloads, it is the obvious choice for most web developers.

In addition to core Observable classes, RxJS offers hundreds of operators designed to express complex logic through simple composition. Using RxJS, it is trivial to build complex functionality from a set of primitive Observables. 

Check out some of the great Operators RxJS has to offer if you’re curious!

How would you use Observables in React?

Using Observables in React is actually quite simple! Subscribing to an Observable is just a side effect, and like any other side effect, we can manage it using React’s powerful useEffect hook. 

obsservables-in-react

Of course, there are many other ways that we need to work with Observables, so it’s best to use a dedicated library to integrate them with React. 

At Fullstory, we use a lightly forked version of the observable-hooks library to integrate Observables into our apps. Using observable-hooks, the previous example becomes even simpler!

observable-hooks

Okay, but why would you use Observables in React?

Earlier, I alluded to some of the unique performance challenges in Fullstory’s session replay app. To elaborate, almost every React component needs to derive some state from the current playback time. 

Unfortunately, the playback time changes often. To maintain video-like fidelity, the time must be updated on every animation frame (yes, Fullstory captures a ton of events). In a poorly optimized app, every React component would re-render on every animation frame.

Luckily, React has good tools for dealing with this type of problem! I’m sure seasoned React developers are already wondering, “Why not store a time ref in a shareable context?” This is a great question! 

It would certainly be easy enough to use React’s context:

react-context-example

This works well for reading the time, but how would we derive values from it? Ideally, we want our components to re-evaluate derived values whenever the time changes, but re-render only when the resulting value is different. 

So, what do we do? 

One simple approach might be to define a push-based subscription mechanism on our context object. One can imagine adding a subscribe() function that allows components to register a callback that is invoked when the time changes. 

But wait, isn’t this approach…similar to an Observable?

Observables offer an elegant solution to our problem

Indeed, our rendering problem is more efficiently solved using Observables than refs alone. Instead of exposing a ref on our context object, we can expose an Observable for the current time! 

observable-solution

Individual components can then use the .pipe() operator to derive new Observables from the time and subscribe to their values lazily. 

For example, imagine we need to re-calculate the current page URL whenever the time changes, but we only want to re-render if the resulting value has changed. 

Using RxJS operators, this is easy:

rxjs-operators

With only a few lines of code, we’ve transformed the current time into a new Observable that will only emit values when the current page URL changes! This pattern works well across many session replay components.

What about Redux?

When discussing push-based state containers, redux is obviously the elephant in the room. It’s certainly true that a global redux store, combined with carefully memoized selectors, could be used to solve our re-rendering problem in a similar manner to Observables. 

However, Observables, and RxJS in particular, offer a much richer set of operators to compose complex functionality than redux alone. While it’s trivial to implement a redux store with RxJS, it’s actually quite complex to implement many RxJS operators as redux selectors!

In session replay, RxJS operators are critical to our ability to express some of our most complex replay logic. In other apps, redux may be a better fit!

Conclusion

At Fullstory, we use Observables in session replay to solve specific performance problems and express complex logic declaratively. Observables are an important tool to our team, but it’s also important that we know when not to use them. 

As software engineers, we should always strive to use the right tool for the problem at hand. For many React apps, Observables could simply be distracting or unnecessarily complex. Redux, or even simple React state, might be a better fit.

Before choosing to use Observables, consider the specific problems you want to solve. If you are struggling to express complex functionality based on frequently changing values, perhaps Observables are the right tool for you!

Want a perfect website or app? Fullstory can help. Request a demo today.

Author
Jordan HurtSenior Software Engineer

About the author

Tech Lead on the Playback team at Fullstory.

Return to top

Related posts

Blog Post
Fullstory and AI: Maximizing behavioral data insights

Discover how Fullstory leverages AI to turn raw data into actionable insights, transforming user experiences and driving business growth.

Read the post
Blog Post
Building a resilient organization: Strategies for risk mitigation and compliance considerations

Master risk management and compliance for robust organizational resilience and data protection.

Read the post
FullStory Engineering Blog
Is go duck-typed?

In programming languages, duck typing can be approximated as the application of the duck test to objects. Here we explore if go is duck typed.

Read the post