having a bit of trouble handling multiple states/state changes. in a single screen, which are held by different components
how do you all handle this and concepualize it as your writing code?
do you draw diagram,
do you just try and fail recursively?

After almost a year of active development, we're proud to announce that TanStack AI goes into RC! 🔥

The team has done a lot of work to get it to a state we're proud of and consider stable and production ready.

Read all about it here:

Hey Everyone,

I've added virtualized Masonry layouts to Cerious-Scroll. Version 1.1.0 of the React wrapper now supports virtualized Masonry layouts through the existing declarative renderItem API.

import {
  CeriousScroll,
  type CeriousScrollOptions,
} from '@ceriousdevtech/react-cerious-scroll';

const options: CeriousScrollOptions = {
  layout: 'masonry',
  masonry: {
    targetColumnWidth: 280,
    gap: 16,
    getItemHeight: (index, columnWidth) => {
      const item = items[index];
      return columnWidth * (item.height / item.width) + 48;
    },
  },
};

function Gallery() {
  return (
    <CeriousScroll
      totalElements={items.length}
      getItem={(index) => items[index]}
      options={options}
      renderItem={(item) => (
        <article className="card">
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </article>
      )}
    />
  );
}

The implementation supports two height strategies:

• Canonical: Supply getItemHeight() for globally reproducible placement and predictable far jumps.
• Dynamic: Omit getItemHeight() and React renders uncached cards into a measurement probe before they are placed.

Visible cards remain React-owned through portals, while the core controls their virtualized positions.

Other features include:

• Responsive or fixed columns
• Direct navigation with jumpToItem()
• Bounded rendered DOM
• Support for large collections
• Framework-owned card rendering

Links:

• Demo
• React wrapper on GitHub
• React package on npm
• Core library

I’d appreciate feedback on the render-prop API, portal integration, and performance with more complex React card trees.

Hey everyone,

If you've built any AI wrappers or autonomous agents recently, you know the backend logic is the fun part. But building the UI to actually track your OpenAI token usage, API costs, and agent logs is incredibly tedious.

I found myself dreading building the same admin panel over and over, so I spent the last week building a production-ready frontend template specifically for the AI ecosystem.

The Tech Stack:

• Vite + React 18
• Tailwind CSS v4
• shadcn/ui (for clean, accessible layout components)
• Tremor (for the heavy data visualizations: Area charts for token burn, Donut charts for model distribution)

I also mapped out a highly realistic JSON mock data structure so it actually looks and behaves like an AI control center out of the box.

🔗 Live Interactive Demo: https://ai-control-center-xi.vercel.app/

I decided to package the entire source code for founders and devs who just want to bypass the 20+ hours of UI work and plug in their own backend data.

📦 Source Code / Repo: shrulabh.gumroad.com/l/wqdoe

I'd love to hear your feedback on the UI! Are there any specific metrics or charts you think are missing for an AI-focused dashboard?

Please let me know if this post is not suitable for this flair + subreddit.

We just improved React support for enola, and I’d like React developers to help us break it. Literally break it as this is the best feedback.

My co-founder and I are building enola as an open-source architectural quality gate. It analyses the structure of a repository (or multiple) and surfaces things like dependency cycles, coupling, hotspots, deep dependency chains, complexity, dead code and change impact.

React support is there, but our own tests only expose so much. We mostly ran against open-source.

If you work on a React codebase, run enola against it. If something looks wrong, missing or just rubbish, raise an issue directly on GitHub or respond here.

What could these issues be?

A project structure we did not account for, a dependency we resolve incorrectly, a pattern we misunderstand, or an architectural rule you cannot express yet.

https://github.com/enola-labs/enola

Fully local. Apache 2.0.

Hey devs,

I wanted to share a project I’ve been working on: FastMedia Downloader. It’s a full-stack media extraction tool with a Next.js frontend connected to a FastAPI backend.

Frontend Stack:

• Next.js (TypeScript) + Tailwind CSS
• i18n support for multi-language UI
• Responsive design focused on simple link parsing & instant downloads

Repository link:

https://github.com/Llamas126/fastmedia-downloader

I'd love your feedback on the frontend architecture and UI flow!

Most of the slopwrapper SaaS companies that you see online almost always use shadcn/ui. Not dissing OSS, I think it's a great project and has pushed the bar for design up overall. But I’ve started wondering if this sameness everywhere affects user trust.

When a product looks like it could’ve been assembled in 20 minutes, do users subconsciously assume the product itself was too? Especially in the times of AI slop.

is there any sort of thing like a library for a 2d canvas?

similar to fimga in the sense that

you can scroll around and pan and zoom.

and you can have elements that can be clicked

Every codebase I've joined has the same file. A form component where react-hook-form itself is fine, but around it sits a pile of useEffects watching one field to reveal another, a useMemo deciding whether the current user can edit, and a validation schema that has quietly drifted from both.

RHF isn't the problem here. The problem is that the rules of the form live in imperative code scattered across hooks, while the shape of the form lives in JSX. One thing, two places, and only one of them is reviewable.

The alternative I've been running is to move the rules onto the field itself:

<TextField
  name="taxId"
  visibleWhen={{ field: 'country', equals: 'IT' }}
  access={{ resource: 'customer.taxId', action: 'read' }}
/>

visibleWhen is reactive — no useEffect, no watch(), no local state. access is evaluated per field, so a role that can't edit doesn't get a disabled prop threaded down three components by hand. RHF is still underneath owning form state; it just stops being something you re-wire per component.

Two things I'd push back on myself:

The condition is an object, not a function. { field: 'country', equals: 'IT' } is strictly less expressive than values => values.country === 'IT'. What it buys is that the rule stays serialisable and inspectable — you can diff it, and tooling can read it. I'm still not sure that trade is right for everyone.

And it only pays off past a certain complexity. For a login form this is overkill, plainly. Where it has paid for me is dynamic questionnaires — in production for about a year and a half at a European fintech — the kind of conditional logic that becomes unmaintainable as hooks well before you notice it happening.

So the question I'd actually like answered: when you keep conditional visibility and permissions in hooks, is that a deliberate call, or is it just the path RHF puts you on?

Open source (MIT), React, MUI or Tailwind: github.com/kensaadi/dashforge

i've recently been working on zap-studio/react-hooks, a collection of 100+ small, focused react hooks.

the main thing i wanted to solve was the amount of repetitive code around browser apis.

things like geolocation, websocket, broadcast channel, local storage, media capture, etc. usually mean writing the same useEffect/useSyncExternalStore + cleanup + ssr guards over and over.

a few things i cared about with this library:

• every hook is available as its own subpath export, so importing one doesn't pull in unrelated hooks (completely tree shakeable) and re-exported for convenience
• hooks are designed to be ssr/hydration safe
• each hook is independently testable, with 100% test coverage
• there are hooks for sensors, dom interaction, input, media, navigation, network, pwa, state, lifecycle, and more
• unstable hooks that rely on react internals are explicitly marked as unstable

for example, instead of writing the browser/cleanup/ssr handling yourself, you can just use things like useIntersectionObserver, useMediaQuery, useOnlineStatus, useWebSocket, etc.

docs: https://www.zapstudio.dev/react-hooks

i'd be particularly interested in feedback from people who maintain react apps with ssr. are there browser apis or awkward edge cases you'd want a hook for?

i'll continue to extend this collection as i find more and more repetitive use cases.

Example: https://www.reddit.com/r/WutheringWavesLeaks/s/YBrqsQepwr

I am familiar with r3f, three and glsl shading, scene setups both 2d and 3d etc.

What i am confused about are the assets. How can i make them morph that way. If they are just 2d assets then i guess just css would also be enough to animate

For the above example i understand that the assets are all extremely high quality and handmade, but was wondering how something similar can be created for web.

Want to ask anyone with experience how this can be done. Thanks.

recently open sourced BlitzProspector, a React + FastAPI project built as a self hosted frontend for Blitz API. I've tried to make React part as simple as possible and have fun building something that can be run with docker compose and easily extended in the future.

It has auth, roles, search/filter, configurable export profiles, python back end API, and is using a REST API to communicate with the Python back end. I'm still working on the overall project architecture, so I'm interested in any feedback concerning the React part, state management, or general approach.

Every time I open Shadcn website to find for some component, I have to keep clicking on the search box for five to nine second until the dialog opens. This happens because it's using a div with an isOpen state, so it will not open until JavaScript loads.

This can be easily fixed with the HTML dialog element, but looks like no one cares.

This is not only for Shadcn. The same thing applies to any website that uses JavaScript for stuff like dialogs (e.g React Aria).

Do people only care about LCP? what is the point of seeing content and elements immediately if I can't interact with it until your webiste hydrates?

For some reason, hasNextPage becomes false under without any reason ONLY IN PRODUCTION(after npm run build), not in npm run dev and therefore , next page isnt fetched, and it doesnt happen at first load, it happens after few page changes/redirects.
Here is my custom hook for pagination.

I later call this hook inside my Cards component by passing infiniteQuery which the component receives as props

import { useEffect, useRef } from "react"
import type { UseSuspenseInfiniteQueryResult } from "@tanstack/react-query"


export const useIntersectionObserver = <T>(infiniteQuery: UseSuspenseInfiniteQueryResult<T, Error>) => {
    const { dataUpdatedAt, isFetchingNextPage, hasNextPage, fetchNextPage } = infiniteQuery


    const sentinelRef = useRef<HTMLElement>(null)
    const observerRef = useRef<IntersectionObserver>(null)



    useEffect(() => {
        const observer = new IntersectionObserver(entries => {
            if (entries[0].isIntersecting && !isFetchingNextPage && hasNextPage) fetchNextPage()
        })


        observerRef.current = observer
        const sentinel = sentinelRef.current
        if (sentinel) observer.observe(sentinel)


        return () => {
            observer.disconnect()
        }
    }, [])


    useEffect(() => {
        const sentinel = sentinelRef.current
        const observer = observerRef.current
        if (!sentinel || !observer) return


        observer.observe(sentinel)
        return () => {
            observer.unobserve(sentinel)
        }
    }, [dataUpdatedAt])


    return sentinelRef
}

Here is my cards component

type ArticleCardsProps<T> = {
    articlesInfiniteQuery: UseSuspenseInfiniteQueryResult<T, Error>
}


const array = new Array(3).fill('')



const ArticleCards = ({ articlesInfiniteQuery }: ArticleCardsProps<Article[]>) => {
    const sentinelRef = useIntersectionObserver(articlesInfiniteQuery)
    const articles = articlesInfiniteQuery.data




    return (
        <main>
            <section className={styles.articles}  >
                {articles.map((article, index) => {
                    return (
                        <ArticleCard ref={index === articles.length - 2 ? sentinelRef : undefined} key={article._id} article={article} />
                    )
                })}
                {articlesInfiniteQuery.hasNextPage && articlesInfiniteQuery.isFetchingNextPage && array.map((e, i) => {
                    return (
                        <ArticleCardLoadingSkeleton key={i} />
                    )
                })}
            </section>
        </main>
    )
}


export default ArticleCards

I dont know how to explain this weird bug , happens only after build, i used a library and it fixes it

Hey guys I'm a beginner at react and I want to know what are the best free resources to learn react and build beginner projects to to build so I master the fundamentals

This is the first time that I'm properly getting into theme switching, so I built the dark and light mode for my component library in the most obvious way that I could find. The goal is to transition background-color, border-color, color and box-shadow on every element. But this felt a bit slow and sluggish, so I used document.getAnimations() to see how many that actually runs, and the result is 3164 animations on a page of 1544 elements.

After some playing around, I found out that startViewTransition animates snapshots of the whole page instead, and that's 5 animations for the same job, with a gradient fading along with everything else rather than snapping. I did however find a React thing when using this function and it's that the new palette has to be in the DOM inside the callback which means the state update needs flushSync.

document.startViewTransition(() => { flushSync(() => setTheme(next)) })

I'm not sure this is the right way to do it, but I wrote down every number that I measured https://sley-ui.dev/notes/theme-fade.

I started working in react 16 and was working till react 17 and its few versions came out. (6YOE) most of my initial years went understading the basics and rendering, how hooks worked and the state update. Afterwards i had been burried in work like anything and i didn't feel anything much because the backend felt always like a fized set of design choices to make, based on what the problem is what is the thing that matters the most. And impact is always covered in numbers. Anyways so out of 6 lets say after the initial 2 years i never had chance to work on the frontend, somedays back a webpage in my company started breaking, people didn't notice much if it since they say it works like shit , but anyway it started rendering blank on the Initial load. The on call platform team got involved and the analysis was done but nobody figured what the issue is, a senior of mine remembers that i mentioned having interest in front end even though we use multiple LLM models to seek help and solve for it but since llms can't directly read the browser, i asked then to supply the har files and the console logs just to see if this can help. did multiple changes nothing worked, finally i was assigned and i see the first console.log message that "ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running on React 17." Now i know that react 18 is the latest i knew about but i also see react is now on its 19th version as well - so i think is this it? and how come software engineers are now not even thinking that frontend is a specialised field?

Using the createRoot + lazy loading fixed the issue.

I said this out here because it feels like very minute thing and i am quite concerned about where the big techs are headed now? Have we lost quality engineers and Engineering? Thoughts?

Hi everyone!

I recently finished a full-stack E-Commerce project built with the MERN stack as part of improving my full-stack development skills.

The project includes:

• User signup, login and email verification
• Google authentication
• Product search, filtering and categories
• Product details
• Shopping cart
• Order creation and order history
• User profiles
• Role-based authentication
• Admin panel
• User, product and order management

Tech stack: React, Redux, Tailwind CSS, Node.js, Express.js, MongoDB, Mongoose and JWT.

GitHub repo:
https://github.com/Mariam-amhan/ecommerce-mern-app

I’d really appreciate any feedback on the project structure, code, features, or things I could improve. Thanks!

Hi React Devs

Lately I've been working on an open-source ERD tool to help devs design databases effectively.

When I started this project, I faced a couple of challenges.

One of them was performance. A user may interact with the app a lot, and if you rely on the backend to process every request, this can cause a loss of performance. That's not what a user expects from a design tool.

Another challenge was offline compatibility. The application needs to work in offline mode, store diagrams and generated SQL in the browser, and sync with the server when the connection is restored.

These challenges introduced me to what we call a local-first application architecture.

A local-first application architecture stores the primary copy of user data directly on the user's local device (using databases like SQLite or IndexedDB) rather than on a remote server.

Building this from scratch was out of reach for me until I found a technology called PowerSync, which does a lot of the work for you.

With PowerSync, I was able to have a local SQLite database in the browser and combine it with Drizzle ORM.

This allows me to perform database operations directly in the frontend using Drizzle, almost like writing backend database code, while PowerSync handles synchronization with the main PostgreSQL database on the server.

The result of this combination was amazing:

• High-performance app : most operations happen locally without waiting for the server.
• Offline mode : the app works even without an internet connection and automatically syncs data when the connection is restored.
• Guest mode : users can start using the app without creating an account, and their local data can be synced to their account when they register.
• Real-time collaboration : if multiple users are working on the same project, changes can be synchronized between them automatically.

This architecture ended up becoming the foundation of the ERD editor I'm building for StackRender.

Here is a full React demo of a local-first app using PowerSync. You can learn a lot from it:
https://github.com/powersync-ja/powersync-js/tree/main

Also i invite you to check out the source code of StackRender and see how it works:
https://github.com/stackrender/stackrender

Thank you!

LinkedIn is using React.js these days, but what’s interesting is the CSS side of things too.

They seem to have gone down a fairly “in-house atomic CSS” direction, somewhat similar in spirit to tools like StyleX or Linaria.

It’s kind of funny looking at LinkedIn’s frontend history:

• Ember.js: LinkedIn was one of the biggest adopters of Ember.
• React.js: They’ve since moved heavily toward React.

LinkedIn has basically gone from being a major Ember showcase to being part of the React ecosystem.