I Used 1 React Hook In 10 Platforms
What this video is
⚡ a 30-minute video, readable in 60 secondsThe video shows that React itself is not tied to the web: the presenter builds one roughly 60-line timer hook using ordinary React state and effects, then drops it unmodified into 10 different apps across 10 platforms, including web, Electron desktop, React Native mobile, a terminal UI, 3D (React Three Fiber), VR/AR (React Three XR), Remotion video, React PDF, React Email, and React Nil. Each app only swaps out its renderer while the same useTimer hook and logic stay untouched, illustrating that a React component just describes state and hands off to a separate renderer to actually draw it. All the code lives in one open source repo, react-everywhere by Brad Traversy. The closing argument is that the reusable, 'boring' part of React (state, effects, composition, and custom hooks) is what actually travels across platforms, not any particular UI layer.
[00:18] Presenter built a roughly 60-line timer hook using standard React state and effects, with no platform-specific logic.
Key takeaways
- [00:32] That single hook was dropped into 10 completely different React apps spanning web, desktop, mobile, VR/XR, terminal, and more.
- [00:44] Everything lives in one repo, react-everywhere, structured as apps/, packages/, and package.json, linked in the description.
- [00:57] Renderers and tools featured include Electron + React DOM, React Email, React Native, React Nil, and React PDF.
- [03:01] A shared logic package holds the useTimer hook, imported unchanged into all 10 apps.
+ 23 more takeaways
- [03:37] A React component describes the UI for a given state, but React needs a separate renderer to apply those changes to a specific platform.
- [03:49] On the web, ReactDOM updates the DOM, but ReactDOM is a separately installed package, not part of React itself.
- [04:55] The hook's signature is useTimer({ duration = DURATION, elapsed } = {}); it becomes 'controlled' whenever elapsed is a number.
- [05:16] The hook returns duration, remaining, running, finished, progress, label, and start/pause/reset/toggle functions for every app that imports it.
- [05:55] npm run web starts the app at localhost:5173 via Vite, using React DOM as its renderer.
- [07:38] npm run electron starts the desktop app on a Vite dev server at 127.0.0.1:5174 using Electron 43.3.0.
- [08:09] Electron embeds Chromium and adds desktop APIs via its main process, but the renderer still uses React DOM.
- [10:29] Unlike the web and Electron apps, which both use React DOM, the mobile app uses a completely different renderer: react-native.
- [11:58] npm run terminal uses a renderer called ink to render React directly to the terminal, with Start/Pause/Reset/Quit bound to s/p/r/q keys.
- [12:52] The experiment's core rule: every variant must use the same useTimer hook from @react-everywhere/logic.
- [14:01] npm run 3 launches a 3D demo built with React Three Fiber (R3F) at localhost:5176, 'ReactEverywhere-3D.'
- [14:18] The 3D app's canvas uses react-three-fiber for the timer, but its buttons still use React DOM, mixing two renderers in one app.
- [15:53] Running the app also triggers a Remotion video render that produces an actual MP4.
- [16:12] Remotion isn't really a custom renderer; it's React DOM booting a headless Chrome, screenshotting each frame, and piping them into FFmpeg.
- [16:41] Remotion has no clock; frames render in parallel and out of order, so setInterval-based ticking is meaningless there.
- [17:12] Timer.jsx instead uses useCurrentFrame() and useVideoConfig(), passing elapsed: frame/fps into useTimer since Remotion owns the clock.
- [19:25] npm run pdf uses React PDF to render components directly into a PDF file with no server, browser, or window.
- [20:02] The PDF report makes six calls to the same useTimer hook in one render, each given a different moment: 0, 15, 30, 45, 59, and 60 seconds.
- [22:26] npm run XR opens the app at localhost:5177, 'ReactEverywhere-XR,' with Enter XR/VR/AR options using renderer @react-three/xr.
- [24:54] npm run email builds the email package, outputting a 5.5kb render.js plus summary.html and summary.txt.
- [25:01] Email is called the most hostile environment on the list, since no mainstream email client runs JavaScript.
- [26:42] React Nil is described as a renderer that implements the full interface but just throws the output away.
- [29:35] Presenter's closing point: the part of React that goes furthest is the boring, invisible part (state, effects, composition, and custom hooks) present in all 10 examples.
Jump to a moment
Their links, sorted & clickable
📢 Sponsored / affiliate1
Start.dev React Fundamentals Course: Use Code TRAVERSY for premiumpaid🔗 Other links1
RepoWas this brief useful?