Code Challenge

React Advanced

0% completed

Code Challenge

Challenge: Smooth Theme Switching

Follow the instructions below to complete the challenge:

Create a Theme Toggle Button: Implement a button that switches between light mode and dark mode when clicked.
Simulate a Heavy UI Update: When the theme changes, simulate a delay by running an expensive calculation (e.g., a loop or a timeout).
Use useTransition to Prevent UI Blocking: Wrap the theme update inside useTransition to make sure the button remains responsive while React processes the theme change.
Display a Loading Indicator: Show a "Switching Theme..." message when the update is in progress.
Test Performance Improvement:
- Without useTransition, clicking the button should freeze the UI briefly.
- With useTransition, the button remains responsive while the theme change happens smoothly in the background.

.....

Like the course? Get enrolled and start learning!