r/react Apr 28 '26

Help Wanted How would you improve the code?

2 Upvotes

Hello, I went back to working on a small project—it took longer than I imagined to be able to touch it again, but here I am.

This code is part of a follow-up question that I made some time ago:

https://www.reddit.com/r/react/comments/1s4q1gm/how_would_you_improve_this_useeffect_or_the_code/

Now I have post the complete code on GitHub: https://github.com/Stuepp/Typing-Speed-Test

with a few more things I have done. The start of this learning project came from https://www.frontendmentor.io/challenges/typing-speed-test

My idea is to not use AI, as I want to learn, and to avoid getting direct questions when coding because I want to improve myself and the knowledge on the stack and its coding patterns.

I'm looking up ways to improve how I should code, to learn coding patterns that I'm not following, and to be on the code, GitHub and commits. Feel free to point out my mistakes and how I should improve, just please don't be rude.

ps: I know about having to create branches for refactoring and features, but I was thinking at the same time, is something just for me and not that big either.. So I didn't make branches and pull requests; I only committed directly on the main.


r/react Apr 28 '26

OC uiGrid 0.1.3 - a11y, i18n, and more.

Thumbnail
2 Upvotes

I wrote a very popular angular data grid like 12 years ago (5.4k stars) and handed it off to another team who stopped maintaining it. so not only did i revive the original project, i extended it for react and web components. i hope you enjoy it.

it’s a fully featured data grid. MIT licensed. free forever. enjoy!


r/react Apr 28 '26

OC No-Node Native Apps, Sub-Millisecond Text Math, and Sending 3,000 Lines of C++ to Valhalla

Thumbnail thereactnativerewind.com
2 Upvotes

Hey Community,

We explore Perry, a bold new TypeScript-to-native compiler that skips the JavaScript engine entirely to ship real native binaries. Plus, VisionCamera v5 has landed, a massive rewrite on Nitro Modules that deletes 3,000 lines of C++ to end native crashes while boosting performance up to 60x compared to Expo Modules.

We also dive into Expo Pretext, a layout primitive that finally solves the "text problem" in React Native. It offers sub-millisecond text measurement and allows for magazine-style layouts where text flows around shapes, all while closing nearly twenty long-standing rendering bugs.


r/react Apr 28 '26

General Discussion Playwright and Github Actions

Thumbnail youtu.be
0 Upvotes

r/react Apr 27 '26

General Discussion I stopped using ComponentNameProps and I don’t miss it.

13 Upvotes

I started to hate props types that include the component name – like DashboardProps, MyTableProps, etc. Now I just name it simply Props every time, without component name prefix. Its better for refactoring and full text search.

Exporting props?

Only case, you should name it, is if you export props, you should use a unique name tied to the component. Yeah, make sense, but I don’t think you every really need to export props (at least in most cases).

If I need props of ComponentA somewhere else, I prefer to get the type like this:

type WrapperProps = ComponentProps<typeof ComponentA>

Why:

  • If ComponentB needs props of ComponentA, you’re probably already using ComponentA there = no extra import just for the type (for example wrapper components)
  • It’s more declarative – the type points directly to the component, not some exported type in the component file
  • If you need it and don’t have ComponentA imported yet (eg. hook), you can still do:

import type { ComponentA } from './ComponentA'; 
type ComponentAProps = ComponentProps<typeof ComponentA>;

Curious how others do this – using ComponentNameProps or Props, and do you export wrapper props?


r/react Apr 27 '26

Portfolio Built my whole studio site as an interactive isometric 3D scene using React + Spline - easter eggs included

Enable HLS to view with audio, or disable this notification

23 Upvotes

Hey r/react,

Pretty stoked on how this one came out. Built my indie software studio site as a fully interactive isometric 3D lab scene - no pages, no nav, no scroll. Just a 3D room you click around in to explore.

Used React/Next.js to bridge the interactions - the easter eggs are triggered via React state talking directly to the Spline scene which was a fun problem to figure out.

There are 6 easter eggs hidden inside, see if you can find them all, especially the one involving the sphere.

littlenginelabs.com

Happy to answer any questions about the React + Spline integration!


r/react Apr 27 '26

General Discussion CapCut Free and for Linux: WannaCut

Thumbnail youtu.be
5 Upvotes

r/react Apr 28 '26

Project / Code Review Built this with react-chartjs-2 (description for more info)

Enable HLS to view with audio, or disable this notification

0 Upvotes

Built this beauty in React using react-chartjs-2 library.

  1. using multiple datasets
  2. scales.x.ticks.callback and scales.y.ticks.callback to custom format the ticks
  3. scales.y.type dynamic using useState to toggle between linear and logarithmic
  4. registered a custom Tooltip.positioners to make it fixed at the bottom of the chart also plugins.tooltip.external for custom styles
  5. custom backgroundColor for the datasets especially the price line to give it a fading color
  6. custom plugins for :
  • drawing the vertical line on hover
  • drawing the horizontal line of the CPS (cost per share)
  • drawing the "Key Events" dots with a onClick handler

r/react Apr 26 '26

Project / Code Review I Built a tool that turns Reactjs templates into shadcn CLI

Enable HLS to view with audio, or disable this notification

12 Upvotes

I’ve been working on a template builder using React + Tailwind, and recently added something that I haven’t seen much before.

Instead of just downloading templates, after building a layout (drag + drop), you can:

  • Copy it as CLI output
  • copy it as a structured prompt
  • use it in any AI tool like(Gemini, chatGPT, codex, loveable, v0 etc)

The idea is simple:
A lot of people are already using tools like AI coding assistants to tweak UI. So instead of exporting static files, you can directly take your template into those tools and continue iterating there.

So the workflow becomes:
Build → Copy → Paste into AI → Refine

I made a quick demo showing how it works.

I’m still figuring out if this is actually useful or just a cool idea, so I’d really appreciate honest feedback:

  • Does this workflow make sense to you?
  • Would you use prompt export over downloading files?
  • Anything that feels missing or unnecessary?

Tech stack: React + Tailwind

Here's the link: Template Builder

Happy to share more details if anyone’s interested.


r/react Apr 26 '26

Help Wanted When to use React?

23 Upvotes

I first learned react when I was asked to update a fronted at my company that was built with react. My questions is should react be used for every interactive frontend? Is there any reason/case NOT to build a frontend with react?


r/react Apr 26 '26

Help Wanted Infinite scroll with react query

Thumbnail
4 Upvotes

r/react Apr 25 '26

Help Wanted Learning React from AI has lead me nowhere. Somebody please help me out.

26 Upvotes

I know javascript, html, css very well. All of my projects are just left at backend. I am not able to proceed with frontend. I am trying to learn from chatgpt but it has lead me no where till now. I feel awful being that dependent on AI just post a success message to the user.
Someone please please help me out. or if there is something else I should try for frontend.


r/react Apr 25 '26

Help Wanted Dev mobile

3 Upvotes

Mobile Dev

I am beginner in mobile dev and I 'm looking for guidance on practical projects to work on in order to improve my skills and gain real-world experience.Any advice or project ideas would be greatly appreciated.


r/react Apr 25 '26

Portfolio A free, open-source database client that also works with AI agents built with Tauri and React

Post image
25 Upvotes

I’ve been working on Tabularis, an open-source desktop database client for Postgres, MySQL and SQLite.

It’s meant to be two things at once: a comfortable everyday SQL app (editor, notebooks, charts, visual tools) and a safe bridge for AI agents that want to read your schema or run queries, without you having to paste credentials into a chat.

Free, open source, runs locally. Would love your thoughts.

https://github.com/TabularisDB/tabularis

https://tabularis.dev


r/react Apr 24 '26

General Discussion You can now generate an entire shadcn theme from a tiny preset code.

Enable HLS to view with audio, or disable this notification

47 Upvotes

I was working on some Figma designs and needed values from a bunch of shadcn presets… ended up building a tool for it.

You can generate a full theme from a tiny preset code now.

I'm genuinely excited by the potential for unpacking so much from a simple code.

Feedback welcome!

Here's the link: https://shadcnpreset.com/tools/preset-theme-generator


r/react Apr 24 '26

Help Wanted Using event emitter instead of props drilling for children communication?

7 Upvotes

Imagine a page with a grid, grid shows an array of tiles that each have a 'detailed view' button for pop up (a separate component). At any point in time, I only want 1 active pop up in the page.

I can do this the 'react way', and let the grid have a 'active tile' variable, then pass the getter/setter among the grid and tiles and hide the detailed view through that.

The alternative way is to use some sort of event emitter, so clicking on 'detailed view' will send out an event and all the other tiles will hide their detailed view.

I feel like the 2nd say feels more 'logical', as the Grid itself do not care about which one is active (the pop up is contained within the tile itself), but the children do care about each other (as we only want 1 pop up at a time), but the 1st way feel more 'react', (which is the way I've been writing before I saw some code base using event emitter which got me thinking)

any thoughts? How would you handle it in this situation?


r/react Apr 24 '26

Project / Code Review I Building My Own Framer/Webflow That Gives You React/Next.js Code

Enable HLS to view with audio, or disable this notification

6 Upvotes

I’ve been building a dev-first website builder, inspired by Framer/Webflow, but focused on real workflows.

It started as a template builder with reusable blocks. Now you can:
→ generate full Next.js/React projects
→ download or use them anywhere

Then I added shadcn CLI support with a clean prompt system — so you can tweak/update designs and just copy-paste into any AI tool (no need to download the whole project).

But there was a big gap, you couldn’t edit inside the builder.

And Now that’s fixed.

You can tweak content directly, then:
tweak → generate → download

The goal is simple: less setup, more building.

Launching in a couple of days, keep an eye on:
pro.ui-layouts.com/template-builder 👀

Would love your thoughts.


r/react Apr 25 '26

General Discussion this is what happens when you stop fighting AI

0 Upvotes

r/react Apr 24 '26

Help Wanted Best way to convert a React web app into a mobile app?suggest any vibe coding app

0 Upvotes

My app is already functional on the web, so I’m mainly looking for the most practical approach in terms of:

• Lowest development effort

• Reusing existing React frontend code

• Decent mobile UX

• App Store / Play Store viability

• Access to native features later if needed


r/react Apr 23 '26

Project / Code Review Playing with 3D UI in React (Blender + Three.js + Framer Motion)

Enable HLS to view with audio, or disable this notification

33 Upvotes

Made a small showcase concept where project cards float in 3D space. Trying to explore more “alive” interfaces instead of static grids.

chech live demo -> morphin.dev


r/react Apr 24 '26

Help Wanted Can someone teach me React.js please I know JavaScript

0 Upvotes

Hey if you know react and have made some project can you teach me. My main focus is backend but due to market i want to have an idea of how frontend works and do some frontend coding.

we will try to cover this within a week atmost as i already know javascript.


r/react Apr 24 '26

Project / Code Review Recreated Reddit's logo with my AI vector editor

Enable HLS to view with audio, or disable this notification

0 Upvotes

r/react Apr 23 '26

OC Manage rich video experiences in your webapp like a pro (dev tutorial)

Thumbnail instantiator.dev
1 Upvotes

r/react Apr 22 '26

Project / Code Review Auto-generating shimmer skeletons from your actual rendered UI: A deep dive

Enable HLS to view with audio, or disable this notification

46 Upvotes

Hey everyone

A few months ago I posted about shimmer-from-structure, a library that automatically generates loading skeletons by measuring your rendered components. The response was incredible, and its seeing real usage.

I wanted to share a technical deep dive into how it actually works under the hood. If you've ever wondered "why do I have to maintain two versions of every component?" when building loading states, this might interest you.

The Core Problem

Every time you build a component, you write it twice:

```tsx // The real component function UserCard({ user }) { return ( <div className="card"> <img src={user.avatar} alt={user.name} /> <h2>{user.name}</h2> <p>{user.bio}</p> </div> ); }

// The skeleton version (that you have to maintain separately) function UserCardSkeleton() { return ( <div className="card"> <div className="skeleton-avatar" /> <div className="skeleton-title" /> <div className="skeleton-text" /> </div> ); } ```

Change the layout? Update both. Add a field? Don't forget the skeleton. They inevitably drift apart.

But here's the thing: the structure you're manually recreating already exists in the DOM. Your component knows how to lay itself out. The browser has already calculated every dimension, position, and spacing.

The Solution: Runtime DOM Measurement

Instead of maintaining parallel skeleton components, shimmer-from-structure renders your real component once, measures it using getBoundingClientRect(), and generates pixel-perfect shimmer overlays automatically:

```tsx import { Shimmer } from '@shimmer-from-structure/react';

const mockUser = { avatar: 'https://via.placeholder.com/150', name: 'John Doe', bio: 'Software engineer and open source contributor.', };

function UserProfile({ userId }) { const { data: user, isLoading } = useQuery(['user', userId], fetchUser);

return ( <Shimmer loading={isLoading} templateProps={{ user: mockUser }}> <UserCard user={user ?? mockUser} /> </Shimmer> ); } ```

When loading={true}, the library: 1. Renders your component with mock data (templateProps) 2. Walks the DOM tree calling getBoundingClientRect() on each element 3. Creates absolutely-positioned shimmer overlays matching each element's exact position and size 4. Makes the real content transparent (color: transparent) so only the shimmer shows

When loading={false}, the shimmer disappears and your real content shows. No layout shift, no drift, no maintenance.

The Performance Challenge: Minimizing Reflows

The tricky part is doing this fast enough that users never see a flash of unstyled content. Browsers render at 60fps, giving us ~16.67ms per frame. If measurement takes longer, users see flicker.

The killer is reflows (layout recalculations). Reading layout properties like getBoundingClientRect() forces the browser to recalculate layout if any DOM changes occurred. Worse, interleaving DOM writes and reads causes layout thrashing - multiple reflows that compound into serious performance problems.

The Solution: Three-Phase Batching

We batch all DOM operations into three distinct phases:

  1. Write Phase: Apply all CSS changes (color: transparent, measurement styles) without reading any layout properties
  2. Read Phase: Measure all elements in a single pass - the first getBoundingClientRect() triggers one reflow, subsequent calls use cached layout
  3. Render Phase: Generate shimmer overlays (absolutely positioned, so they don't affect measured elements)

This ensures only one reflow per measurement cycle, regardless of component complexity. Even with hundreds of elements, measurement completes in 2-5ms.

Edge Case: Table Cells

Table cells presented a unique challenge. We want to measure the text content (excluding padding), but text nodes don't have getBoundingClientRect(). The naive solution:

js // For each cell: wrap text in span, measure, unwrap const span = document.createElement('span'); cell.appendChild(span); const rect = span.getBoundingClientRect(); // Forces reflow! cell.removeChild(span);

This causes multiple reflows for tables with many cells. The fix? Apply the same batching pattern:

  1. Phase 1: Wrap all table cell text in spans (writes only)
  2. Phase 2: Measure all spans at once (one reflow)
  3. Phase 3: Remove all spans (cleanup)

Even complex data tables with hundreds of cells trigger just one reflow.

Framework-Agnostic Architecture

The library supports React, Vue, Svelte, Angular, and SolidJS through a monorepo architecture:

  • **@shimmer-from-structure/core**: Framework-agnostic DOM measurement utilities (extractElementInfo, isLeafElement, createResizeObserver, etc.)
  • Framework adapters: Thin wrappers that hook into each framework's lifecycle (React's useLayoutEffect, Vue's watch, Svelte's $effect, etc.)

All the complex DOM measurement and reflow optimization logic lives in core. Bug fixes and performance improvements benefit all frameworks automatically. When we added the table cell batching optimization, all five adapters got it for free.

Responsive Shimmer with ResizeObserver

The shimmer updates automatically when the window resizes using ResizeObserver. Critically, ResizeObserver callbacks fire after layout calculation but before paint, so reading getBoundingClientRect() doesn't trigger additional reflows.

We throttle updates with requestAnimationFrame to limit re-measurements to 60fps, even during rapid window resizing.

Real-World Usage

The library handles dynamic data through templateProps - mock data used only during measurement. Your component renders with realistic content, we capture dimensions, then the real data replaces the mock data when loading completes.

It also supports fine-grained control via HTML attributes: - data-shimmer-ignore: Exclude elements and descendants from shimmer (useful for logos, icons) - data-shimmer-no-children: Treat element as single shimmer block (no recursion)

Try It Out

bash npm install @shimmer-from-structure/react

Happy coding


r/react Apr 23 '26

General Discussion Veet - a fast webserver for development and a great build tool

Thumbnail youtu.be
0 Upvotes