/home/mrjunejune/zenbu: react_games/README.md annotate

annotate react_games/README.md @ 44:0cfd7d9277b0

[ReactGame] 2048

author	MrJuneJune <me@mrjunejune.com>
date	Wed, 03 Dec 2025 18:34:22 -0800
parents	9b8521f75409
children

rev	line source
40 9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	1
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	2 # Introduction
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	3
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	4 Hi, my name is June I am a software engineer at Meta working on ads manager. I work with anything related to destination and placements of the ads.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	5
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	6 # Loading is slow — what do you do?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	7
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	8 - Three pillor
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	9 - too long to download hmtl, js and CSS;
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	10 - too long to donwload assets;
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	11 - TFBL is too long
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	12
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	13 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	14 Me:
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	15 “First I figure out which bucket we’re in: too many bytes, heavy media, or slow first byte.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	16
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	17 If it’s JS bytes, I split aggressively: route chunks, `React.lazy`, and I do render-as-you-fetch so data and code arrive together. At Meta we declared EntryPoints so the bundler knew exactly what to ship for, say, a modal—no more shipping the whole app for a tiny flow.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	18
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	19 If it’s media, I’ve led pipelines that convert images to WebP/AVIF with proper `srcset` and generate multi-bitrate HLS. Short 2-second segments, aligned keyframes, quick start. I even shipped a lightweight player tuned for iPad because that’s what our artists used. EXIF
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	20
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	21 If it’s TTFB, I check edge caching and geography. I once found an Nginx box serving North America from Europe—moved it and TTFB dropped immediately.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	22
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	23 I keep bundle budgets in CI; I’ve even split a ‘kitchen-sink utils.ts’ into per-export files to stop accidental pulls. And I won’t merge if LCP or JS bytes regress.”
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	24 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	25 ---
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	26
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	27 # How do you do i18n/l10n?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	28
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	29 - ICU
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	30
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	31 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	32 Me:
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	33 “I externalize every user string and use ICU (International Component for unicode) style messages for plurals, select(gender, status), number, and datatime in curly brackets. I believe JS the most common one is called format.js and it just follow common ICU format while you need to set a locale. For react, you can do that as a global state or looking at your browser.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	34
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	35 At Meta we used FBT: annotate strings, extract, translators ship locale payloads, runtime picks based on browser locales. For RTL, I prefer logical CSS properties—`margin-inline-start` instead of `margin-left`—so the layout flips automatically. Icons and chevrons mirror; no string concatenation—everything is a template.”
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	36
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	37 TL;DR: “Template everything, lazy-load locales, pseudolocalize, and design with RTL in mind.”
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	38 If they drill down: “I’ll show how `dir` + logical props remove most RTL branches.”
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	39 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	40 ---
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	41
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	42 # How do you ensure accessibility?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	43
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	44 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	45 For me, accessibility starts with semantics. If HTML already has the right element—like <button>, <nav>, <main>—I’ll use that first. ARIA is my backup plan, not my starting point. And keyboard support isn’t optional: I make sure there’s visible focus, a logical tab order, and if there’s a dialog, I trap focus inside and return it to the trigger when it closes.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	46
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	47 One example: I worked on a government-funded site for the Canadian Digestive Health Foundation. Accessibility was part of the core requirements, so I built a workflow where axe-core and Lighthouse audits ran in CI on every commit. We also did manual screen reader spot checks with VoiceOver on macOS and NVDA on Windows. That caught a few big issues early—like ‘div-as-button’ anti-patterns and subtle color contrast failures that automated tools flagged but designers had missed.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	48
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	49 In React, I try to keep the DOM lean for both performance and assistive tech—so I avoid unnecessary wrapper <div>s and prefer fragments. A smaller DOM actually makes it faster for screen readers to parse and navigate, which we saw in our own testing. At Google, I saw firsthand how small DOM and strong semantics reduced not just accessibility bugs, but also made features easier to test and maintain, because you’re working with real HTML roles, not bolted-on ARIA roles that can drift out of sync.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	50 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	51 ---
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	52
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	53 # How do you improve web app security?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	54
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	55 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	56 My security mindset is: all input is hostile, all output is untrusted.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	57
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	58 For XSS, I never render raw HTML directly. If I absolutely have to—say for trusted markdown rendering—I sanitize it with a vetted library and pair it with a tight Content Security Policy. I like using nonces for inline scripts so even if HTML injection happens, the injected scripts won’t run.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	59
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	60 For CSRF, if I’m using cookie-based auth, I always set SameSite to Lax or Strict and pair it with CSRF tokens. Frameworks like Rails and Django handle this elegantly, and I’ve shipped secure implementations in both. I also make sure state-changing requests (POST, PUT, DELETE) are protected while GETs remain idempotent.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	61
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	62 Token storage is strictly in httpOnly cookies—never localStorage—so they can’t be accessed via JavaScript if there’s an XSS bug. I learned the hard way that storing them in localStorage makes them trivial to exfiltrate once an attacker has script execution.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	63
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	64 I’ve been burned by path traversal before while building a C server. A crafted ../../etc/passwd path slipped past my naive checks. Now I whitelist file roots, normalize paths, and reject anything that resolves outside of the intended directory before even touching the filesystem.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	65
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	66 Then there are the defensive headers I always set:
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	67
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	68 Strict-Transport-Security (HSTS) to enforce HTTPS
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	69
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	70 X-Frame-Options: DENY to stop clickjacking
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	71
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	72 X-Content-Type-Options: nosniff to prevent MIME sniffing
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	73 // so they don't upload script and get executed.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	74
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	75 Finally, I keep the supply chain clean—running dependency scans in CI to flag vulnerable packages before they hit production.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	76 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	77 ### Anything special for LLM apps?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	78
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	79 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	80 Me:
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	81 “Yes—treat model output as untrusted. Sanitize before rendering (no `javascript:` links, strip HTML). Tools run in containers with least privilege; dangerous commands require explicit user approval. Retrieval is allow-listed; prompts redact secrets/PII. We log, rate-limit, and run output validators so a jailbreak can’t inject code into the UI.”
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	82
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	83 TL;DR: “Sandbox tools, sanitize outputs, least privilege, and audit everything.”
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	84 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	85 ---
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	86
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	87 # Cross-browser compatibility?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	88 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	89 I start cross-browser compatibility work with a clear, telemetry-driven support policy—usually defined in Browserslist based on actual analytics data from production traffic. That way, we only transpile and polyfill for the browsers our users actually have, which keeps bundles smaller and startup faster. Babel + core-js handle the JS side automatically, but the output is scoped to what Browserslist specifies.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	90
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	91 Testing happens continuously—we run functional and visual regression tests on Chrome, Safari, and Firefox as part of our CI pipeline. I like visual diffs triggered per key user action, because layout breakage often slips past unit tests but is obvious in a screenshot comparison.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	92
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	93 One real-world example: a teammate introduced ES6 Set in a shared util, but one of our long-tail browsers didn’t support it. Instead of shipping core-js globally, I implemented a scoped polyfill with feature detection—if (!window.Set) { loadPolyfill(); }—so the fix applied only where needed.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	94
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	95 On the CSS side, I start with Normalize.css to flatten default browser inconsistencies, and use Autoprefixer to add only the vendor prefixes relevant to our supported browsers. That’s been especially helpful with Flexbox gap support and CSS Grid alignment quirks.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	96
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	97 Safari gets extra scrutiny because it often behaves differently even when standards-compliant:
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	98
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	99 Viewport units — I account for iOS’s dynamic toolbars by using svh/lvh fallbacks and calc()-based adjustments for older versions.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	100
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	101 Media autoplay — I handle the playsinline attribute, preload strategies, and gesture requirements so video/audio works predictably across iOS and macOS.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	102
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	103 In short, I aim for telemetry-driven browser targeting, surgical polyfills, consistent tri-browser test coverage, and Safari-specific hardening—keeping the experience stable without bloating the codebase."
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	104 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	105
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	106 ---
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	107
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	108 # React: state management — what do you recommend?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	109
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	110 Me:
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	111 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	112 Local UI state → I stick with useState or useReducer. They’re built-in, predictable, and perfect for component-specific concerns like form inputs, modals, or toggles. If a component’s state is self-contained, there’s no reason to lift it up or introduce another library.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	113
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	114 Cross-component state that’s small and read-heavy → I’ll reach for React Context. It’s great for things like theme, auth user info, or feature flags. I keep writes infrequent here, because context updates re-render all consumers; if writes get frequent, I move to a store.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	115
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	116 Server state → This is where React Query or SWR shine. They give me caching, stale-while-revalidate behavior, optimistic updates, background refresh, and request deduplication out of the box. I treat server state as derived—meaning if the server has the truth and I can fetch it, I don’t duplicate it in a client store.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	117
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	118 Global, complex client state → Zustand or Redux Toolkit. Zustand is my go-to for minimal boilerplate and small to medium stores. Redux Toolkit comes out when I need the extras: time travel, action logging, serializable state for persistence or debugging, and strong devtools integration.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	119
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	120 Graph-shaped data → Relay or Apollo if the backend is GraphQL. Relay’s compiler is fantastic for large apps with strict data dependencies; Apollo is quicker to adopt in smaller or mixed-stack projects.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	121 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	122
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	123 ---
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	124
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	125 # Can you explain `useRef` and when you use it?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	126
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	127 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	128 "useRef is essentially a persistent, mutable container that survives re-renders without causing re-renders.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	129 It returns an object like { current: … } where current can hold any value—DOM elements, numbers, objects, even functions. Unlike useState, updating .current doesn’t trigger a component update, so it’s perfect for data you want to remember but that doesn’t affect rendering directly.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	130
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	131 Common uses in my code:
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	132
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	133 DOM access — For example, ref={inputRef} on an <input> so I can call inputRef.current.focus().
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	134
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	135 Timers and debouncers — Storing a timeout ID so it survives between renders but won’t trigger a re-render when it changes.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	136
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	137 Previous values — Capturing something like prevCount.current = count inside an effect to compare with the next render.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	138
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	139 AbortController — Keeping an instance between renders to cancel pending fetch requests when the component updates or unmounts.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	140
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	141 Bridging to non-React libraries — Many third-party libraries expect a stable reference to mutate; useRef is the glue to make that work without messing up React’s render cycle.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	142
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	143 I think of useRef as "state that lives outside React’s rendering flow"—it’s there when you need memory across renders, but you don’t want it to cause a re-render when it changes.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	144
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	145 TL;DR: “It’s a stable box for remembering values across renders without re-rendering.”
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	146 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	147
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	148
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	149 ---
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	150
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	151 # Component vs Hook?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	152
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	153 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	154 React components take props and return a React element. Custom hooks can take in anything and return anything. Built in React hooks like useState allow us to hook into the React lifecycle.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	155 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	156 ---
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	157
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	158 # Pros and cons of React?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	159 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	160 React’s strengths start with its composable model—UI is just functions of state, which makes it easy to break complex interfaces into small, reusable components. The ecosystem is enormous, so there’s a mature library or pattern for almost anything: routing, data fetching, animation, state management. And with the newer SSR + streaming APIs, React’s server story is finally first-class—no more ‘SSR as an afterthought.’ On top of that, TypeScript support has matured to the point where DX is excellent—generics, discriminated unions, and inferred props make large codebases much safer.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	161
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	162 But there are trade-offs. Hydration can be expensive if you over-hydrate everything the server sends—your Time to Interactive can balloon. It’s also easy to lean too heavily on Context for shared state, which triggers unnecessary re-renders and hurts performance. And React’s concurrent rendering features, while powerful, add mental overhead: you have to think about transitions, tearing, and how updates are prioritized.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	163
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	164 I mitigate those issues by being intentional about where React runs:
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	165
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	166 Islands / partial hydration so only interactive parts hydrate; the rest stays static HTML.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	167
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	168 Memoization where it matters—React.memo, useMemo, and useCallback—but only after profiling so I don’t add useless complexity.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	169
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	170 useSyncExternalStore for stable, low-overhead subscriptions to global state without causing render cascades.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	171
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	172 Code-splitting at the route, component, or even chunk-of-feature level so users never download more than they need.
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	173 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	174
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	175 ---
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	176
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	177 # Your ideal stack for a Copilot-style app?
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	178
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	179 {
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	180 Me:
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	181 “Go on the backend with FastCGI—render the shell with SSR for instant TTV, sprinkle React islands where I need interactivity. Postgres + Redis. An LLM service that proxies providers, enforces guardrails, and sandboxes tools. CDN for static/media, edge cache for SSR fragments, and SSE/WebSockets for streaming tokens.”
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	182
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	183 TL;DR: “Go SSR + React islands; Postgres/Redis; sandboxed LLM service; CDN + edge.”
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	184 }
9b8521f75409 [ReactGames] Few games I made using react just to practice few things. MrJuneJune <me@mrjunejune.com> parents: diff changeset	185

Mercurial

annotate react_games/README.md @ 44:0cfd7d9277b0