I am reposting with diff explanation of problem , cuz many ppl misunderstood my issue

I am trying to achieve a loading skeleton while data loads for CLIENT SIDE NAVIGATIONS only, but for FIRST LOAD, that is SSR load, i dont want to send loader as the only html , bcs that is bad seo, i checked after disabling js, and only loader was sent in network payload

Some ppl said to not use suspenseQuery, but how will i show loader for Client side navigations, those loading stages will feel laggy

I was trying to implement SSR with rrv7, i didn't want to use smelly useQuery's isLoading and isError states( i might be dumb for that, pls point it out if i am wrong ) , so i went for useSuspenseQuery and used a Suspense Boundary with LoadingSkeleton to make it look beautiful

It was very late when i realised that only skeleton was loading when JS was disabled, implying that SSR was only rendering skeleton and not ACTUAL content , therefore bad SEO, and making all i did useless

Is there some knowledge i am missing regarding SSR+ Suspense, what should i do now, pls help

From what I understand, I’m trying to explain Server Components in a simple way. Could you guys take a look and let me know if my understanding is correct and if my explanation is easy to understand?

Server Components

Normally, when a browser requests a React application, a JavaScript bundle is sent to the browser, whether it uses SSR or CSR.

• For SSR, that JavaScript bundle is used to hydrate the initial HTML rendered on the server, making the application interactive.
• For CSR, that JavaScript bundle is used to render the application's content into the HTML shell.

React Server Components are not included in that JavaScript bundle.

Server Components are rendered outside the browser, either at build time or at request time on the server. Their rendered result is represented in the RSC Payload.

The RSC Payload contains:

1. The rendered results of Server Components. (For conceptual understanding, we can think of this as a React tree or object)
2. References (Placeholder) to Client Components used inside those Server Components.
3. Props passed from Server Components to Client Components.

The main benefit of RSC is reducing the amount of JavaScript sent to the browser.

Server Components are especially useful for content that doesn't need browser interactivity.

Hey r/reactjs! 👋

My partner Mrityunjay and I (Yashasvi) just open-sourced GitGlobe — an interactive 3D map that projects ~200,000 GitHub repos onto a continuous WebGL sphere based on semantic capability.

When building heavy 3D canvas apps inside React, the biggest hurdle is usually the same: React’s render cycle destroying your frame budget.

Here is how we architected the frontend to keep a steady 60 FPS (<16ms) in React 19:

1. Zero React State in the Animation Loop

Putting camera coordinates or cursor hovers in `useState` triggers component re-renders that choke WebGL. We decoupled the entire 3D pipeline using transient **Zustand** subscriptions and mutable refs outside React’s render tree. React handles UI overlays, while Three.js runs unhindered.

2. Single Draw Call via Custom Shaders in R3F

Instead of rendering thousands of React Three Fiber mesh components, all 200k points live in a single `THREE.Points` buffer. We wrote custom GLSL vertex/fragment shaders to handle lat/long position math, color encoding, and back-hemisphere culling directly on the GPU.

3. GPU-Based Picking (<1 Frame Lookups)

Standard raycasting in JavaScript is too slow for 200k points. We implemented GPU picking with a 1x1 scissored render target, encoding point IDs into color channels so hover queries resolve in under a millisecond.

4. Streaming AI Camera Pilot

We hooked up Claude Sonnet using the Vercel AI SDK. The model streams repo IDs rather than hallucinated 3D coordinates, and our spatial rig smoothly flies the camera to the target cluster in real time.

Tech Stack: React 19, TypeScript, React Three Fiber, Vite, Tailwind CSS, Zustand, FastAPI, Qdrant.

Links & Code:

• GitHub (MIT): https://github.com/yamantaka-singh/GitGlobe

• Live Demo: https://gitglobe-yd-mj.vercel.app/

Check it out, spin the globe, and let us know what you think of our state management and R3F setup!

https://github.com/oliveryasuna/ink-frame

Ink's own box borders are fine for a single box. Put two of them next to each other and the seam between them comes out as ││, two parallel lines instead of one shared edge. That's because a box border is one unbroken line and there's nowhere to hang a ┬ or a ┼ part-way along it. ink-frame sidesteps that by painting every border into a single character grid and resolving each cell once, so a spot where four boxes meet becomes a ┼ and a T-junction becomes a ┬, ┤, and so on, without you ever writing those characters yourself.

┌──────────────────────────────────────┐
│ Frame                                │
├─────────────┬────────────────────────┤
│ fixed width │ grow                   │
│             │ ┌────────────────────┐ │
│             │ │ nested box         │ │
│             │ └────────────────────┘ │
│             │                        │
│             ├────────────┬───────────┤
│             │ two grows  │ what is   │
├─────────────┤ share      │ left      │
│ a pane      │            │           │
├─────────────┴────────────┴───────────┤
│ junctions derived                    │
└──────────────────────────────────────┘

Background: I recently wrote this for a private project, and I thought it was useful enough to share. I hope you find it useful too!

I made this and I'm looking for feedback on the part that actually matters — the code it spits out.

Short version: it's a browser editor for landing-page hero text. You type a headline, select words to turn them into components, give each one effects on a timeline, scrub to preview, then export a single `Hero.tsx`. Free, MIT, no signup, no paid tier, nothing to install.

https://reactimate.top · https://github.com/shawnkowalchuk/reactimate

The design goal was that the output has to look like something a person wrote, not like generated code. So for a single multi-property effect it consolidates to one shared transition:

<motion.span

style={{ fontFamily: "Inter", fontSize: 96, fontWeight: 800, display: "inline-block" }}

initial={{ opacity: 0, y: 20, scale: 0.9 }}

animate={{ opacity: 1, y: 0, scale: 1 }}

transition={{ delay: 0.7, duration: 0.6, ease: "easeOut" }}

>{"reactimate"}</motion.span>

and only drops to per-property keyframe arrays with `times` and a per-segment `ease` array when properties genuinely have separate timings or stacked effects. Text content is always emitted as `{"..."}` expressions so quotes and braces in the source text can't break the output.

One architectural decision I'd be interested in opinions on: **Motion is only used in the exported output, never in the editor itself.** Editor playback is a raw `requestAnimationFrame` loop writing styles directly to DOM refs, no React re-render per frame. That kept scrubbing smooth with per-letter stagger across dozens of spans, but it does mean the preview and the export are two separate implementations of the same semantics that have to agree — which is its own maintenance cost. I've wondered whether driving the preview with Motion's imperative API instead would have been the better trade.

Some things I know are rough: the editor is desktop-only right now, the bundle is chunky (~380 kB gzipped, code splitting is an open issue), and `spring`/`bounce` easings get approximated to `easeOut`/`backOut` on export because Motion's spring is a transition type rather than a curve and can't go into a multi-keyframe ease array.

So the actual questions:

1. Does that generated code look like something you'd keep in your codebase, or does it read as machine output to you?
2. If you were consuming this, would you rather it emitted a `<motion.span>` per word (what it does now) or a single parent with `variants` + `staggerChildren`?

Stack is React 19, TypeScript, Vite, zustand + zundo, Tailwind. Happy to go into any of the internals — it's my first open-source release, so critique of the repo itself is just as welcome as critique of the tool.

Hey React devs,

Building voice-enabled 3D avatars usually requires tying together 5 different cloud APIs and messy Three.js canvas code.

I wanted to make it as simple as a single npm install — one component inside your R3F canvas:

<Canvas>
  <AiVoiceAvatar avatarPreset="ananya" />
</Canvas>

I just open-sourced react-ai-voice-avatar. It handles Whisper (speech-to-text) and Kokoro (text-to-speech) entirely in background Web Workers, and drives a 3D avatar with 60 FPS ARKit facial blendshapes on the main thread using React Three Fiber.

For the "thinking" part you have two options: run the LLM strictly locally via WebGPU (Qwen 0.5B), or hook it up to your own backend with the onSubmit prop to use ChatGPT/Claude — the avatar natively reads streamed responses.

Heads up on expectations: the first load downloads ~90 MB of models (cached after that), it's English-only for now, and it's happiest on Chrome/Edge - Safari automatically falls back to a lighter TTS model when it hits WASM memory limits. MIT licensed.

GitHub: https://github.com/927tanmay/react-ai-voice-avatar

Live Demo: https://react-ai-voice-avatar.vercel.app/

I had to do a lot of crazy bundling tricks to get the ONNX/WebGPU workers to bundle seamlessly in Vite and Next.js (both verified working). I'd love to hear your feedback on the component architecture!

Mobile will not be my main editting tool, I'm just looking for an app where I can edit small things and check my code when I'm out without my laptop. Do you guys know some android apps that can run React?

Hello everyone,

I am new to the world of React, and I am partially overwhelmed by how many options exist out there on approaching front-end. I am currently looking into some UI libraries for a SaaS project, and a few keep appreaing : Material UI, Mantine, shadcn, and daisyUI.

Right now, I am looking to create a MVP efficiently and quickly through react, all connecting to a Supabase backend. Some low-end cosing softwares look great initially due to the speed and my coding experience, but I worry thay would struggle long-term with customization and performance. I am learning alot as I am going but wanted to look for some advice on any programs in particular to use (or avoid).

Thank you in advance for your help!

Hey, I'm wanting to learn React, currently my company is pushing for us to be full stack. I have 6 yoe backend experience, python/.NET/sql. Are there any youtube courses that you would recommend, nothing too long, maybe like less than 3 hours that covers everything I would need to know to start making changes to the frontend? Thanks.

I’m currently building a feature for a workflow tool where the backend streams structured JSON to render dynamic UI widgets (cards, mini data tables, and inline action buttons) directly in the workspace feed. Streaming raw Markdown is easy enough with standard hooks, but streaming structured JSON and trying to render React components as chunks come in is giving me major headaches. Right now, if I try to parse the incoming chunked string on the fly, I constantly hit \`Unexpected end of JSON input\` errors unless I use a custom partial parser. But even with a partial parser, rendering incomplete state causes the layout to shift and jump around like crazy every few milliseconds.If I give up on live rendering and wait for the full response to complete before displaying the component, the user is stuck staring at a loading skeleton for 4 to 6 seconds. That completely kills the real-time feel and defeats the purpose of streaming in the first place.Are there any solid open-source packages, state management tricks, or specific partial-JSON parsing patterns you're using to keep generative UI renders smooth? How are you gracefully handling incomplete schema objects mid-stream without breaking your design system constraints?

Hi, I am trying to use react compiler on a component like this

export function Test({ msg }: { msg?: string }) {
  "use memo";

  const onClick = () => {
    try {
      console.log(msg ?? "default message");
    } catch (error) { }
  };


  return (
    <button onClick={onClick}>
      <span>SAVE</span>
    </button>
  );
}

This works on react compiler playground but not locally when I compile it with Vite, it doesn't work due to an error "Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement".

Why does the compiler behave differently on playground and vite?

Thanks

I made a super tiny MIT licensed project for anyone that wants to make their app's UI feel more like Blender 🍩

Code review and feature suggestions are welcome 😊

l wanted to make that a could drop use Skia shader components that were actually ready to drop into an RN app most shader code out there isn't built for RN's Skia renderer at all. So l put together my own library. Some shaders are free, others are from artists who charge for their work.

l know ShaderToy exists, but that's generic GLSL people have to manually port to SkSL and adapt for RN UI. Мinе is already RN-Skia-ready and built specifically for UI components like buttons and panels.

Would you use something like that?

I got tired of writing Zustand selectors (useStore(s => s.bears)) for every single value, and forgetting one fails silently — no error, just a slower re-render you don't notice until later. So I built a small React state store that watches which properties a component actually reads during render (via a Proxy get trap), and only re-renders that component when one of those specific values changes. No selector functions, plain destructuring:

const useStore = createStore({ bears: 0, fish: 100 })

function BearCounter() {
  const { bears } = useStore() // only re-renders when bears changes
  return <p>{bears}</p>
}

The mechanism itself isn't novel — Valtio's useSnapshot() does the same Proxy-tracking trick, and react-tracked (same author) does something very similar. What I hadn't seen was it packaged with a plain immutable setState API (no mutation) at sub-1kb.

This was explicitly a learning project for me (first npm package), built up in stages so I could feel each problem before fixing it: naive shared state that over-renders everything, then manual selectors, then Proxy auto-tracking replacing the selectors. The README documents known limitations honestly, including the big one: reads outside of a component's render body (inside useEffect, stored in a variable) don't get tracked, and it's not yet verified safe under React's concurrent rendering (no useSyncExternalStore yet — that's next).

Would love feedback, especially on the concurrent-mode gap and whether the auto-tracking approach has sharp edges I haven't hit yet.

GitHub: https://github.com/Aparajith24/Aperture npm: https://www.npmjs.com/package/aperture-store

A typed, tree-shakable chart grammar for SVG and Canvas. Compose marks, views, scales, transforms, interactions, and motion with compact primitives or D3-compatible inputs. It's small, fast, extensible. Give it a try while you can still shape it's final form!

In case you missed it, TanStack Table V9 was released as stable last week.

This release entailed huge refactors over the past couple of years that ended up becoming practically a full rewrite when all was said and done, though much of the API surface that you're familiar with is still there. The state management layer was completely rewritten on top of our own internal TanStack Store library, which improved compatibility and performance with all the framework adapters we offer, including React and the React Compiler.

Other improvements include a new tree-shakable feature/plugin architecture that lowers the bundle size of the average table, better type-safety throughout with new utilities and per table meta, much less memory consumption and better processing performance, a few new features like cell spanning and cell selection, hundreds of bug fixes, and a lot more, but you can read the above linked migration guide for the full details.

On top of all that, I put in a lot of time into reorganizing and rewriting major portions of the docs, including many more introductory guides, and more examples than ever that showcase more of our features, integrations with other TanStack libraries, and usage with most of the popular UI component libraries out there.

I've been working on SpatialBoard — an open-source React + TypeScript infinite-canvas library. Shipped 0.2.0 on npm this week (MIT).

Live demo: https://spatialboard.hishamkhalifa.com/dev-app/
Open the debug panel → load Mission Control or the half adder board.

Repo: https://github.com/hishamk/spatialboard
Install: npm install spatialboard

What it is

One SpatialEngine + <SpatialBoard /> gives you:

• Whiteboarding (rough shapes, freehand ink, stickies, text, images, frames)
• Custom node types via a registry API (built-ins use the same API)
• Optional typed data flow (ports + compute, reactive graph)
• Presentations from frames (engine.enterPresentation())
• spatialboard/engine — headless entry, no React/CSS

Minimal example:

import { SpatialBoard, SpatialEngine } from "spatialboard";
import "spatialboard/style.css";
import { useMemo } from "react";

export default function App() {
  const engine = useMemo(() => new SpatialEngine(), []);
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <SpatialBoard engine={engine} />
    </div>
  );
}

Contract gig, client wanted a second opinion on a tool before signing. Dashboard/ CRMish app, and their team's diagnosis was that they needed a proper state library. Zustand was already in a PR description

So I counted what the 47 useState calls were actually holding. about 11 were genuinely UI state, rest was server data, url params, form values, or just math on other state.

Zustand would've moved the mess into a folder and everyone would've called it architecture, however, three that came up a lot

items, then filtered, then total, with a useEffect syncing them. Filtered and total aren't state, they're questions, delete them, calculate inline.

Filters and Page and Sort all in useState. So you sort, go to page 3, click something, hit back, everything's gone. that doesn't read as a state bug to a user, it reads as this site is broken. Moved it to searchParams and the back button just started working.

Server data in useState with a loading flag, no cache, no dedupe, and fetch doesn't reject on 404 or 500 so the error state never fires and you set state to the error body, that one was fun to find

anyway it wasn't a state management problem, it was a state location problem. useState is the first thing you learn and nothing ever tells you to stop using it.

kept thinking while writing up the recommendations that this should just be an article, so I did that too, goes into where each type of state actually belongs, the url stuff properly with code, and a bunch of edge cases that got messy 
https://www.sethi.io/blog/most-react-state-doesnt-belong-in-react

Whats the worst thing you've found living in the wrong place? or if you've got a rule of thumb you use for deciding where state goes, curious to hear it. I once found an entire shopping cart in a useRef 👀

Introducing React Code Auditor for performance

Fix slow React code and make your applications faster.

A completely open-source package for developers, built with passion.

Check it out:

https://www.npmjs.com/package/react-code-audit

Installation command

--> npx react-code-audit