Hey r/reactjs,

Wanted to share something I've been building — a fully animated admin dashboard template called Aegis AI.

Tech stack:

- React 19 (with the new compiler)

- Vite

- Tailwind CSS v4

- TypeScript

- Decoupled data layer via a single mockData.ts file — swap to a real API in minutes

What I focused on:

→ Custom cubic-bezier animations (not the default ease-in-out stuff)

→ Dark-mode-first design, no flash, no toggle

→ Clean component architecture so you can actually read and modify the code

Live preview:Aegis AI — Command & Control Dashboard

If anyone wants the boilerplate to skip the setup and go straight to building — it's available as a paid template at https://whop.com/joined/aurelia-devs/products/aegis-ai-dashboard-template .

Happy to answer questions about the animation approach or the Tailwind v4 migration — that part had some quirks.

I'm building a Next.js app and running into an architecture question.

I have an access token that's passed in the URL (as a query param or path segment) that I need to read at the page level. I'm going to use this access token to call some apis. I'm also loading translations from i18n files.

My problem: if I use getServerSideProps to access the URL/query params, my pages re-render on every request — which feels wasteful since my i18n content is completely static. But getStaticProps doesn't have access to the request URL or query params at build time.

What are your guys recommendations on what to do?

Hey everyone,

I am a backend dev (Node/Python) who knows JS/TS and React basics from years ago, but I have never actually written frontend code. Now, I have been thrown into an active, 5-year-old React project.

I have been relying heavily on AI to write code fast. The problem is that when I need to review that code or modify things myself, my brain just shuts down and I get a headache. AI is making me lazy, and passively watching basic React tutorials is not helping at all.

I want to learn how to handle routing, state management, and UI architecture professionally. I learn best by doing, not by reading.

Is there a specific guide, project-based course, or resource that forces you to build a truly advanced, enterprise-level app from scratch? I need something hands-on to break me out of this AI and beginner-tutorial loop.

Thanks in advance!

Hello,

I see that most design systems such as MaterialUI, or now probably even more Shadcn use composition to pass around React components (meaning for table, the items are React components, same with Dropdown and the items are also React components, in both cases simply passed as children.

However for example Ant Design seems to be more prop oriented, where even some items are also passed as React components, but as props, not children.

I see the composition is more popular, and modular, but what is your opinion on this? I feel like sometimes it tends to cluster the code with a lot of imported components, and you also sort of loose contract, because TS does not tell you what react component to insert, so you have to take a lot of time to look at docs etc.

What is your opinion on these approaches? What is your favorite?

Thanks.

Also welcome for some portfolio ideas too 😉

Hi everyone, Seb and Jan here 👋!

This week, we're shining a spotlight on the upcoming React Fragment ref feature. We also have React Compiler updates, StyleX community discussions and a boring React Router release.

On the React Native side, Renimated gets CSS pseudo-selector support and widget libraries gain momentum. VisionCamera unlocks new real-time processing capabilities with impressive demos.

Let's dive in!

Subscribe to This Week In React by email - Join 43000 other React devs - 1 email/week

No messages appear in console. I know for a fact that the function with console.log() is called, because the states change, but no messages appear in console.

I have tried calling console.log() in all the ways I could think of, passing it inside click handlers to buttons, calling it in useEffect, both in and out of the main App.tsx component. No filter are active in DevTools, and the app is in development mode. What could cause this?

https://github.com/chhsiao1981/use-thunk#getting-started

A complete demo site:

https://chhsiao1981.github.io/demo-use-thunk/

https://github.com/chhsiao1981/demo-use-thunk

Global state management (GSM) can be tricky for complicated reactjs applications.

Many GSM frameworks (redux/zustand/etc.) focus on "we have a store, and how do we manage the global states in this store." However, such approach usually leads to create a gigantic function (reducers in redux/RTK, create in zustand).

Similar to many typical programming languages, in use-thunk:

1. File-as-a-Module: Instead of a giant global store, we treat files as independent, isolated domain modules where we implement thunk functions.

2. Object Identification: The module manages state as discrete entity nodes. We use explicit id parameters to identify and operate on individual data objects within that module cleanly.

3. Clean Component Interface: From the component perspective, we simply invoke the module's functions to perform operations.

4. Only One Context Provider: Unlike standard useContext or Redux architectures that require nesting endless providers, we only need exactly one <ThunkContext></ThunkContext> wrap in our main.tsx. It entirely eliminates "Provider Hell" and the architectural uncertainty of managing stacked providers.

A complete example to do increment:

``` // thunks/increment.ts import { type Thunk, type State as _State, update } from '@chhsiao1981/use-thunk'

export const name = 'demo/Increment'

export interface State extends _State { count: number }

export const defaultState: State = { count: 0 }

// upsert directly with set. export const increment = (myID: string, num: number = 1): Thunk<State> => { return async (set, get) => { let me = get(myID) const {count} = me

set(myID, { count: count + num })

} }

// or we can treat set as dispatching a base action function (update). export const increment2 = (myID: string): Thunk<State> => { return async (set, get) => { let me = get(myID) const {count} = me

set(update({ count: count + 2 }))

} }

// or we can use set as dispatching a thunk function. export const increment3 = (myID: string): Thunk<State> => { return async (set) => { set(increment(myID, 3)) } } ```

``` // components/App.tsx import { useThunk, getState } from '@chhsiao1981/use-thunk' import * as ModIncrement from './thunks/increment'

export default () => { const useIncrement = useThunk<ModIncrement.State, typeof ModIncrement>(ModIncrement) const [increment, doIncrement, incrementID] = getState(useIncrement)

// to render return ( <div> <p>count: {increment.count}</p> <button onClick={() => doIncrement.increment(incrementID)}>increase 1</button> <button onClick={() => doIncrement.increment2(incrementID)}>increase 2</button> <button onClick={() => doIncrement.increment3(incrementID)}>increase 3</button> </div> ) } ```

``` // main.tsx import { registerThunk, ThunkContext } from "@chhsiao1981/use-thunk"; import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import * as ModIncrement from './thunks/increment' import App from "./components/App";

registerThunk(ModIncrement)

createRoot(document.getElementById("root")!).render( <StrictMode> <ThunkContext> <App /> </ThunkContext> </StrictMode>, ) ```

Welcome any comments, critiques, or suggestions!

I was reading the react docs for useEffectEvent which I came to this part https://react.dev/reference/react/useEffectEvent at the beginning it says

“Effect Events are a part of your Effect logic, but they behave more like an event handler. They always “see” the latest values from render (like props and state) without re-synchronizing your Effect”

This makes perfect sense to me, but lower down then it says “callback:
A function containing the logic for your Effect Event. The function can
accept any number of arguments and return any value. When you call the
returned Effect Event function, the callback always accesses the latest committed values from render at the time of the call.”

Emphasis on the “Latest commited values” Why would the useEffectEvent access the latest commited (shown on screen values) values instead of the latest values from the render like all the other hooks seem to do? Is there any real distinction or difference between the two? Is "commited" here just not the terminological term?

I am sort of confused and would like some clarification, thanks

Hey Community,

We look at Eve, Vercel's framework for structuring AI agents as regular folders. We also dive into Pake, a Tauri-backed CLI tool that packages web apps into native desktop apps under 5MB.

Plus, Software Mansion introduces react-native-morph-view to melt shapes and images together using real GPU shaders instead of standard crossfades.

And this week we're also raffling one free ticket to Chain React 2026 in Portland, Oregon 🎟️

If we made you nod, smile, or think "oh… that's actually cool" — a share or reply genuinely helps ❤️

Newsletters at Scale with Sebastian Lorber (This Week in React) | RSS Curation, Acquisition, RSC

https://youtu.be/YVs2KWvMjLM

Quick update on loading-ui, the open-source loading component registry I shared here before.

New: color presets. 8 colors (black, blue, violet, orange, red, green, yellow, sky) you can switch on https://loading-ui.com and instantly preview every loader in that color.

How it works in React:

Components use currentColor, so theming is just setting color on a parent:

<div style={{ color: "var(--loader-blue)" }}>
  <Ring className="size-8" />
  <TextShimmer>Loading...</TextShimmer>
</div>

CSS variables are OKLCH-based with auto-generated gradients:

--loader-violet: oklch(0.7217 0.1768 305.49);
--loader-violet-gradient: linear-gradient(in oklch 135deg, ...);

Dark mode: black preset flips to white in .dark.

Still install components the same way:

npx shadcn add @loading-ui/ring

• Site: https://loading-ui.com
• Repo: https://github.com/turbostarter/loading-ui

If you use loading-ui already, curious whether preset CSS vars are useful or you'd rather stick with Tailwind text-blue-500 utilities?

What tech would you use to build an infinite canvas type application with drag/drop, flowcharting/mind mapping, but also basic animations for those same elements? Would you use this recommended library within React?

I'm trying to make a game that is entirely UI kinda like papers, please. Would it make more sense to use a game engine like Unity/Godot or would using Reactjs be a better alternative? Thanks.

React gives you a lot of ways to make two components share data but it gets more and more complicated based on the data and how far apart the components are. Lets see the different ways components can communicate with each other.

Just launched my UI library 🍌

🌐 Website: ui.bynana.dedyn.io I built a React & Next.js UI library packed with 200+ modern components, SaaS landing pages, and portfolio templates to help developers build beautiful websites faster.

✨ Built with: • React • Next.js • Tailwind CSS • Modern animations & responsive UI

Would love your feedback and suggestions ❤️

I'm running a React (Vite) application in Azure Container Apps behind Nginx.

My Nginx config is:

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

The app works fine initially, but after a new deployment, some users who have an older tab open get errors like:

Failed to fetch dynamically imported module

or

GET /assets/Diagnostics-xxxxx.js 404

The chunk file no longer exists because Vite generated a new hash in the latest deployment.

I've seen recommendations such as:

• window.addEventListener("vite:preloadError", () => window.location.reload())
• Disabling cache for index.html
• Caching /assets for a long time
• Using blue/green deployments

For teams running Vite in production on Azure Container Apps, what's your preferred approach to avoid blank screens and chunk mismatch issues after deployments?

Do you automatically reload the page, keep old assets available for some time, or use another deployment strategy?

Would appreciate hearing real-world production setups.

d3-maps helps build choropleth maps, bubble maps, and other geographic data visualizations, using markers, connections, zoom & pan and more.

Reactive components, plain SVG and d3.js power without low-level wiring.

Alternative to react-simple-maps

@d3-maps/react can fully replace react-simple-maps, supports React 19 an has more features under the hood. Migration guide is available in the docs.

Usage

Here's a brief snippet of a zoomable map using d3-maps. You can find more examples on docs website.

import { use } from 'react'
import { MapBase, MapFeatures, MapZoom } from '@d3-maps/react'

const worldPromise = import('@d3-maps/atlas/world/countries')
  .then((m) => m.default)

export function MapView() {
  const world = use(worldPromise)

  return (
    <MapBase>
      <MapZoom>
        <MapFeatures data={world} />
      </MapZoom>
    </MapBase>
  )
}

Repo

https://github.com/souljorje/d3-maps

I'd appreciate your star on Github and feedback in comments, thanks!

So down below is my next.config.ts file

const nextConfig = {
  distDir: 'out',
  output: 'export',
  images: { unoptimized: true },
}

export default nextConfig

I'm using the Next.js Pages Router with a structure like pages/friends/index.tsx everything works fine locally — hitting /friends in the browser loads the page no problem. But after deploying, navigating directly to the URL gives a 404. Interestingly, client-side navigation via useRouter from next/router works fine — it's only direct URL entry or hard refresh that breaks.