> Markdown version of [/videos/124-build-uis-that-learn-discover-the-powerful-combination-of-ui-and-ai?t=561](https://www.wearedevelopers.com/videos/124-build-uis-that-learn-discover-the-powerful-combination-of-ui-and-ai?t=561). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

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

What if your UI could predict a user's next click? Discover how to eliminate latency by combining React and TensorFlow.js for intelligent predictive prefetching.

- **Speakers:** Eliran Natan
- **Event:** WeAreDevelopers LIVE
- **Published:** March 24, 2021
- **Duration:** 21:35
- **URL:** https://www.wearedevelopers.com/videos/124-build-uis-that-learn-discover-the-powerful-combination-of-ui-and-ai

## Summary

Heavy single-page applications often suffer from latency issues, even when utilizing React's built-in code-splitting capabilities. While lazy loading delays the fetching of large components until they actuate, it forces users to wait strictly during the interaction phase. By combining user interface interactions with machine learning, developers can eliminate this wait time through predictive prefetching. The application leverages user idle time to fetch components or entire routes dynamically, anticipating a user's next move before they definitively make it.

Building a user-adaptive interface within the browser environment relies on TensorFlow.js and algorithmic sequence prediction techniques. Tracking ordered click sequences translates behavioral habits into one-hot encoded inputs—preventing the model from inferring false numerical correlations—fed into a localized neural network. By utilizing an LSTM layer tailored for structural pattern recognition, the model outputs a probability distribution indicating the most likely upcoming interactions. Because the training fit command operates asynchronously, the application continuously learns in the background, adapting to shifting user behavior without disrupting the visual rendering thread.

Bridging the gap between machine learning mechanics and declarative UI requires centralized state management using the React Context API. A dedicated predictor context initially encapsulates the TensorFlow logic, while custom wrapper components evaluate if a specific trigger aligns with the predictive model's highest probability output. Upon an educated guess, a separate prefetch context acts as an internal message bus, triggering dynamic component imports for necessary resources before expected navigation. Beyond merely background-fetching code fragments, intelligent click prediction enables deeply responsive application structures, allowing UIs to preemptively highlight or provision functionality perfectly matching individual usage patterns.

**Keywords:** predictive prefetching, react lazy loading, tensorflow.js browser training, dynamic component imports, react context API architecture, sequence prediction machine learning, code splitting optimization, LSTM neural networks, single-page application performance, one-hot encoding logic, client-side continuous training, adaptive UI behavior, asynchronous model training, UI message bus networking

## Chapters

1. **The problem of loading delays in single-page applications** (00:17) — Heavy React components increase load times even when utilizing standard lazy loading APIs.
1. **Breaking the loading trade-off with predictive prefetching** (02:10) — Prefetching entire routes or components before a user clicks entirely removes waiting time.
1. **Using sequence prediction to guess the next user action** (04:06) — Tracking ordered click sequences enables training an intelligent mechanism to forecast probability distributions for upcoming actions.
1. **Designing a neural network for click sequence prediction** (06:53) — Function approximators with one-hot encoding and long short-term memory layers output accurate probabilities for the next action.
1. **Implementing and training the prediction model in TensorFlow.js** (09:21) — The TensorFlow.js library provides commands to stack network layers, request predictions, and asynchronously fit models to sequence batches in the browser.
1. **Linking UI predictions to code prefetching with React context** (11:58) — Connecting decentralized prediction triggers with rendering components via an application-wide context coordinates seamless dynamic code imports.
1. **Combining React code splitting APIs with machine learning models** (18:29) — Merging predictive machine learning functionality with decentralized frontend state contexts drastically improves application performance through anticipatory rendering.

## Related Moments

- [Implementing predictive prefetch with machine learning](https://www.wearedevelopers.com/videos/287-state-of-angular) (from "State of Angular")
- [Balancing prediction accuracy with background loading eagerness](https://www.wearedevelopers.com/videos/1570-blazing-fast-page-navigation-with-speculation-rules) (from "Blazing Fast Page Navigation with Speculation Rules")
- [Navigating cross-browser progressive enhancement for machine learning](https://www.wearedevelopers.com/videos/1296-exploring-the-future-of-web-ai-with-google) (from "Exploring the Future of Web AI with Google")
- [Evaluating page performance using customized ML prediction models](https://www.wearedevelopers.com/videos/1771-ai-is-an-electric-bike-for-the-brain-stoyan-stefanov) (from "AI is an Electric Bike for the Brain - Stoyan Stefanov")
- [Recreating React components using AI and dev tools](https://www.wearedevelopers.com/videos/1786-wearedevelopers-live-ai-freelancing-keeping-up-with-tech-and-more) (from "WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More")
- [Scaffolding pages and routing single-page applications with Next.js](https://www.wearedevelopers.com/videos/311-graphql-apollo-next-js-a-lovely-trio) (from "GraphQL + Apollo + Next.js: A Lovely Trio")

## Related Articles

- [Dev Digest 124 - None like it hot](https://www.wearedevelopers.com/magazine/460-dev-digest-124-none-like-it-hot)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 118 - not a total recall](https://www.wearedevelopers.com/magazine/452-dev-digest-118-not-a-total-recall)
- [Dev Digest 108 - Git off my cloud!](https://www.wearedevelopers.com/magazine/407-dev-digest-108-git-off-my-cloud)

## Related Jobs

- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**