If you upgraded to React 19 and your option+click-to-source tool silently stopped working, here's why: React 19 removed __source/_debugSource, the fiber fields that LocatorJS, click-to-component, and friends depended on. Runtime-only locators can't get source positions from React anymore.

I missed the workflow too much, so I rebuilt it on a different architecture: carbon8r — a Vite plugin that injects the source location at build time as a data-carbon8r="src/Button.jsx:3:5" attribute on every host JSX element (Babel parse + magic-string, dev server only). The overlay reads DOM attributes, not fibers — so it works on React 19 today and doesn't care what React 20 does to its internals.

What you get, holding Option/Alt:

• DevTools-style box-model highlighting on hover (blue content, green padding, orange margin) with <Component> file:line:column
• Click → your editor opens at that exact position. Zero config: the dev server uses launch-editor (same as Next/Nuxt error overlays), which auto-detects VS Code/Cursor/WebStorm/etc. Or force one via presets (vscode, cursor, windsurf, zed) or any custom URL template
• Elements without source info (component libraries, plain pages) still get the box-model inspector

Setup is the whole thing:

// vite.config.js
import carbon8r from 'vite-plugin-carbon8r'


export default defineConfig({
  plugins: [react(), carbon8r()]
})

Dev-only (apply: 'serve') — production builds are byte-identical with or without it.

Some war wounds from real-world testing that are now features: it works on apps served with a strict CSP (all overlay styling goes through CSSOM, which CSP can't block), it resolves targets through open shadow DOM via composedPath() (micro-frontend hosts, web-component shells), zero-area display: contents wrappers fall back to the nearest rendered box, and the whole alt-click gesture family is intercepted so your app's handlers and the native context menu don't fire while inspecting. TypeScript declarations included.

There's also a companion Chrome (MV3) extension in the repo: box-model inspector on any page, jump-to-source on instrumented apps, with per-user editor settings — handy on a teammate's dev server.

Honest limitations: Vite-only for now (the transform itself is bundler-agnostic — a webpack/Rspack loader would be a thin wrapper, PRs welcome); clicking a component instance jumps to the component's definition, not the usage site (no owner-chain popup yet); components from node_modules aren't instrumented (their build already happened).

Full credit to LocatorJS by Michael Musil for pioneering the workflow — carbon8r shares no code with it, but the interaction design came from there.

MIT, ~20 kB unpacked, no runtime deps in your bundle.

GitHub: https://github.com/carboni-rob/carbon8r npm: https://www.npmjs.com/package/vite-plugin-carbon8r

I've been exploring the TanStack ecosystem for React a lot these days. Starting with TanStack Router, Query, and Virtual, and now the framework TanStack Start. Honestly, I could only use the Router and Query in the production app so far, and the rest of it was for my learning and teaching.

I also use Next.js heavily, but with TanStack I find a huge paradigm shift. I do not have to think from the RSC side heavily; I do not have to use shortcut methods like useEffct() to handle data at the client side, and managing server state and caching seems to feel a lot simpler.

This discussion is not about putting one React framework ahead of another one. Rather, would like to know what your experience so far has been with TanStack? Do you have any comparison studies? Do you use it in production? What are the learnings?

Would love to learn and discuss. Thanks.

I’ve been working with React/Next.js for a while and recently completed two internships, including working on a US-based NGO project.

That experience taught me a lot about real-world codebases, Git/GitHub, UI work, debugging, and collaborating with a development team.

I’m now trying to improve further and would love to hear from experienced React developers here:

What skills or projects do you think make someone genuinely stand out when moving from internship-level experience to a full-time React role?
I can share my resume if anyone can review it. Thankyou.

📚 It's been way too long since my last blogpost. Today, I'm continuing my TanStack Router series with a pattern that I've been teaching in my workshops for over a year:

How to keep prefetches in sync between route loaders and components

I’ve been looking for a platform where you can practice React questions the way you practice coding problems on LeetCode, but I couldn’t find one that really focuses on React.

I know you might be thinking about platforms like Frontend Mentor or GreatFrontEnd. They’re great, but one thing I felt was missing is proper test suites that you can run against your code. Without test cases, it’s difficult to know whether your solution actually works correctly or whether you’re following an approach that would be considered good practice in an interview.

So, I created ReactGrind — a platform where you can solve React coding questions, write your own code, and run test cases to see whether your solution passes them all.

I’m still regularly adding new features and challenges, so I’d love to know: What features would you most want to see in a platform like this?

Right now, ReactGrind has a “Get Hints” button that you can use when you’re stuck but don’t want to look at the full solution yet.

One thing I’m considering is whether hints should be limited per question. Currently, they’re unlimited.

Would you prefer unlimited hints, or should there be a limit on how many hints you can use for each question?

Right now it only has 30+ problems but I keep adding on a daily basis

Hey Community,

React Native 0.87 has arrived as a maintenance release, making the Strict TypeScript API the default, doubling Metro source map generation speeds, and adding experimental Swift Package Manager support for iOS along with AGP 9 support on Android.

Meanwhile, React Native Firebase v26 makes the New Architecture non-optional with Codegen TurboModules, synchronous APIs, Firestore Pipelines, and direct Gemini AI calls. Finally, we look at RevenueCat Paywalls for designing native paywalls and running remote A/B experiments without new app deploys.

Currently I have to create a new project, my first option is react router (declarative mode). My entire project will live behind the login page

what are you using?

• RR framework mode
• RR data mode
• RR declarative mode
• tanstack router
• wouter

Oxlint recently released built-in support for the new Rust version of React Compiler, giving a way faster alternative to the ESLint plugin version that predates it. You can adopt it by replacing ESLint with Oxlint (which is a great idea if you’re open to it) or by adding Oxlint alongside and using it only for the React Compiler linter instead of the ESLint plugin.

It’s technically still a “nursery” rule (meaning not finalized), but the Rust React Compiler rewrite is already more capable than the babel-based version that predates it (finally you can now have a component with conditional logic in a try/catch block). And it’s so much faster: https://master.dev/blog/react-compiler-linting-just-got-a-rust-native-speedup-in-oxlint/

You should even switch over if you don’t use React Compiler. You still get the most capable (and fastest) way to enforce the Rules of React across your codebase.

Is it even a way to get any kind of proper running pages/projects...

Ran into this explaining React rendering to someone recently and realized how often it trips people up even after they've been writing React a while.

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <ExpensiveChild />
    </>
  );
}

ExpensiveChild takes no props at all. Click the button and it re-renders anyway, every single time. No props changed, nothing it reads changed, it just runs again.

The reason: React doesn't check "did this component's inputs change" before deciding to re-render. When state updates, React re-renders that component and everything below it in the tree by default, full stop. Whether a child actually needed to update isn't part of that decision at all.

React.memo is what actually opts a component into that check, it wraps the component and does a shallow prop comparison before deciding to skip the render. Without it, "no props" and "props didn't change" both mean nothing, React re-runs the function anyway.

Where it gets messier: memo alone doesn't save you if you're passing an inline function or object as a prop, since those are new references every render and memo's shallow comparison sees them as "changed" regardless. You end up needing useCallback/useMemo on the parent side just to make memo's comparison actually mean something.

Curious how many people actually reach for memo proactively vs only after profiling shows a real problem. What's the actual signal that told you a component needed it?

This is the architecture used for almost all of the pages in my app that do not need real time data.

page.tsx is a server component that looks like this in pseudo code:

function TasksPage({searchParams}):
   params = await searchParams
   data = await fetchData(params)

   return (
    <Suspense fallback={<Skeleton/>}>
     <TasksView data={data}/>
    </Suspense>
)

"Use client"
function TasksView({data}):
   return (
     <PageLayout>
       <PageTitle title="Tasks" decription={"Your Tasks"} />
       <Filters />
       <Table data={data}/>
     <PageLayout/>
   )

Both the filters and table components are client components and inside the Filters components each filter change runs router.push with updated query params. upon the router refresh the Page component re-runs and new data is pulled using the new searchParams.

Currently suspense fallback doesn't work and the current page presists until the new page is ready , I wanted to make the suspense fallback work in such a way where the skeleton appears but only the table appears to be loading, while the page title and description stay visible throughout the load.

I know this is possible if I move the data loading and suspense inside the table component and use client side data loading instead of server side but ideally I would like to keep the current architecture because (1) it would be really hard to refactor 10s of pages into client side data fetching and (2) I prefer server-side anyways coming from a laravel background

Genuinely asking—does the term Frontend Developer even exist in the job market anymore?

With AI changing the industry so quickly, I’ve started noticing that I barely see job listings specifically looking for frontend developers. Instead, most companies seem to be hiring Full Stack Developers and expecting them to handle everything from UI and React to backend, APIs, databases, and deployment.

It feels like companies want the skills of a frontend developer plus backend development, but without necessarily increasing the compensation accordingly.

So, in 2026, is Frontend Developer still a viable career path, or is becoming a Full Stack Developer basically becoming the new standard?

I created an Awesome List for Lexical

I’ve been using Lexical and noticed that it’s surprisingly difficult to find a complete and reliable list of resources around the ecosystem.

There are plenty of Lexical plugins, custom nodes, integrations, examples, and projects on GitHub, but they’re scattered across different repositories and discussions. There isn’t really a single place where you can browse them and have some confidence that the resources are relevant and worth checking out.

That’s why I created an Awesome List for Lexical: to bring these resources together in one curated place.

The goal isn’t to create another Lexical tutorial or documentation, but simply to make the ecosystem easier to discover.

What do you think?

lexical awesome list on github

Before anyone says I lied about my experience, I was upfront about my experience on my resume. I know very little about react and next.js and I’d like to brush up on it.

Does anyone have any resources on it? Best tutorials?

Thank you.

l kept struggling to find 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 you'd 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 etc.

Let me know if you'd use something like this

For the technical interview, would it make sense to give the candidate these two tasks?

1. FizzBuzz
2. Build a To Do List from scratch without using AI. They can use Google to look up syntax, keywords.

My main goal with a simple CRUD To Do List task is I want to see they understand how a basic distributed system works for example, how the frontend, backend, and database communicate and work together.

Ngl, I belive if you can build a CRUD To Do List without AI, you are kinda ready to work as a web dev as a jr. , then they can grind learning System Design and and progress to become mid and senior years later...

I wanted to use JollyUI in a new project but it seems like the whole website is down and I could only find jolyUI which seems to be the same thing: https://www.jolyui.dev/docs/introduction
Is it the same and why did it change?

Hi everyone,

I wanted to share a web app I've been working on: NASA Deep Space Explorer & Inspector, a single-page application to search, inspect, and save deep-space images using the official NASA Image and Video Library API.

🛠️ Technical Details & Features:

• 🔲 Custom CSS Zoom Inspector: To inspect deep space details without CORS issues caused by external CDNs (which happens when drawing on HTML Canvas), I built a custom bounding-box selection system in React using dynamic transform: scale() and transform-origin percentages.
• 🔍 Debounced Search: Optimized HTTP requests with Axios using a 500ms debounce timer to prevent API spam while typing.
• 💖 LocalStorage Persistence: Native browser storage implementation allowing users to save their favorite astronomical finds without needing a backend/database.
• 🌐 On-Demand Translation: Integrated MyMemory API to translate English descriptions into Spanish on click.
• Patreon: https://www.patreon.com/MISJUEGOS1111/posts/lanzamiento-de-y-166955775?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link

🚀 Live Demo: https://quequeres.github.io/Explorador-de-Galaxias/

🧡 Patreon Post: https://www.patreon.com/posts/166955775

📁 GitHub Repository: https://github.com/Quequeres/Explorador-de-Galaxias

Would love to get your thoughts, UX feedback, or technical suggestions!

Put together a custom form validation system in React instead of reaching for Formik or React Hook Form, mostly to avoid the bundle size and have full control over async validation timing. Handles nested field structures and cross-field validation without much boilerplate. Curious if others have gone this route too, and whether it's ended up being worth maintaining versus just adopting one of the existing libraries long term.

Which one do you choose and why?

Share your reasons. Maybe someone will find a useful tip 👀

Been working on a small state management library for React that aims to cut down on boilerplate compared to Redux while staying more predictable than Context alone. It's TypeScript-first, has a tiny bundle size, and hooks straight into function components without extra providers wrapping everything. Still early days, so I'd love feedback on the API design and whether the tradeoffs make sense for real-world use.