Build UIs that learn - Discover the powerful combination of UI and AI

What if your UI could predict a user's next click? Learn to build self-training apps that prefetch code and eliminate loading delays entirely.

#1about 1 minute

The performance problem of large single-page applications

Large component codebases in single-page applications can lead to significant loading delays and a poor user experience.

#2about 3 minutes

Using lazy loading and prefetching to improve performance

React's lazy loading API defers component loading, and dynamic imports can prefetch resources before they are explicitly requested by the user.

#3about 3 minutes

Predicting user actions with machine learning sequences

User navigation can be modeled as a sequence prediction problem, where a machine learning model predicts the next click based on past behavior.

#4about 2 minutes

Designing a neural network for click prediction

An LSTM (Long Short-Term Memory) neural network is well-suited for sequence prediction, using one-hot encoding to represent user actions without false correlations.

#5about 1 minute

Implementing the prediction model with TensorFlow.js

TensorFlow.js allows for building and running machine learning models directly in the browser using a sequential API to stack network layers.

#6about 1 minute

Training the model asynchronously with user data

The model is trained asynchronously in the background using the `fit` command, allowing the application to adapt to user behavior over time without blocking the UI.

#7about 3 minutes

Architecting a solution with the React Context API

A centralized architecture using two React contexts, one for prediction logic and one for prefetching, decouples the prediction source from the prefetching action.

#8about 3 minutes

Implementing the context-based prefetching logic in code

A custom `PredictionLink` component uses the `useContext` hook to listen for predictions and trigger prefetching via the prefetch context.

#9about 3 minutes

Summary of the intelligent prefetching technique

Combining React's code splitting with a browser-based machine learning predictor creates a powerful system for improving application performance by prefetching resources.