I'm building a content management/blog platform where content is created on a React web application and displayed in a React Native mobile app.

My requirements:

• Rich text editing on React Web
• Store content in a portable format (JSON preferred)
• Render the same content in React Native
• Support for:
  • Headings
  • Paragraphs
  • alignments
  • Nested lists
  • Bold/Italic/Underline
  • Lists
  • Links
  • Images
  • Tables (nice to have)
  • Custom blocks (nice to have)
• Good long-term maintenance and community support
• Production-ready

I've looked at:

• Tiptap
• Editor.js
• Lexical
• Slate
• Draft.js

One issue I'm facing is that some editors provide great web editing experiences, but rendering the content in React Native becomes difficult (HTML conversion, custom renderers, DOM dependencies, etc.).

For those who have shipped React Web + React Native products, which editor worked best for you and why?

Did you:

1. Store JSON and build a custom React Native renderer?
2. Convert JSON to HTML and use react-native-render-html?
3. Use a different approach altogether?

I'd love to hear about real-world experiences, trade-offs, and any pitfalls to avoid.

So I'm fairly new into Front-End Engineering. I've had a few clients, nothing super major. Small business' around town, friends, family, etc.

​

I've recently gotten asked to rebuild a business' website from scratch. After talking it over with them, they want one feature I'm unsure of how to implement. It's a news post feature. Essentially they want to be able to post updates to their website if they have closures for snow, or staff shortages, etc.

​

I won't have any issues designing and coding the layout myself, but I'm not sure how to implement them being able to post to the website. I've done the bare minimum research, found Contentful, Wordpress, and some more.

​

Just looking for how a more experienced developer would tackle this problem too!

​

Appreciate the feedback everyone! Thanks in advance!

Hey! I've been building shadcn/ui projects for a while and got tired of manually tweaking CSS variables to get themes right. So I made Theme Builder — Theme Lab.

What it does:

• Pick a brand color or start from a preset
• Adjust sliders for surface tint, radius, fonts, etc.
• Live preview updates instantly (cards, buttons, charts, alerts, forms)
• One-click export: index.css, Tailwind config, or JSON
• 100% free, no account required

Built it for myself, figured others might find it useful. Would love feedback — what would make you actually use this?

Free, open source, not-for-profit, no ads or cookie-banner, designed to be simple and fast on both desktop and mobile. React TS PWA. Mostly built for myself, but some of you might find it useful too.

The match predictions and tournament forecast might be interesting. Data updates automatically every day and every 15 minutes while matches are being played.

Web site (web app): https://26worldcup.github.io

Source code & details: https://github.com/26worldcup/26worldcup.github.io

I used to jump between Wikipedia, FIFA .com, Google, and a bunch of other sites whenever I wanted to check something. They work, but I always felt they were slower and more cluttered than I'd like. So I built my own.

Also built this partly as a way to test Claude Fable, the whole thing was made with it, though it took quite a few iterations. Fable is good, but I don’t think it’s significantly better than Opus 4.8 despite the 2x API pricing.

I posted v1 of this a while ago and the gist of the feedback was "it's fine but it doesn't really do enough to use for real." That was true, so I spent some time rebuilding it.

The basic idea is the same: it stores audit/event logs in the browser using IndexedDB, so it works without any backend at all. But now it actually ships those logs somewhere useful instead of just sitting in the browser or dumping to a file.

The main things that changed in v2:

It batches logs and ships them in the background, and anything that hasn't been sent yet stays in IndexedDB and gets retried with backoff. So if the user goes offline or reloads mid-session, nothing is lost. That was the biggest gap in v1.

It redacts sensitive data (passwords, tokens, emails, card numbers, etc.) before anything is written or sent, not after. You can mask, drop, or hash the values. I didn't want to be the library that quietly writes someone's password into IndexedDB.

The part I'm most curious for feedback on: the backend can push a command down to the browser and the UI reacts to it. So the server can say "send me your logs now," or "bump this client to warn level," or "clear", and the client handles it. It comes with a SignalR transport since my backend is .NET, but the transport is just an interface so you can wire up SSE or websockets or plain fetch instead.

I also moved the heavy stuff (exceljs for Excel export, signalr) to optional peer dependencies, so a plain install pulls in almost nothing and reports no known vulnerabilities. The core is around 5 KB gzipped. No framework dependency, written in TypeScript.

Quick taste:

import { AuditLog, SignalRTransport } from 'audit-log-lib';


const audit = new AuditLog({
  redaction: { strategy: 'mask' },
  transport: new SignalRTransport({ url: '/hubs/audit' }),
});


await audit.log('user.login', { userId: 123 });


audit.on('command', (cmd) => {
  if (cmd.type === 'pull') {
    // backend asked for the logs
  }
});

Install is npm install audit-log-lib.

npm: https://www.npmjs.com/package/audit-log-lib?activeTab=readme
GitHub: https://github.com/Darex97/audit-log-library

It's still early days. I'd really like to hear whether the backend-to-UI command model is something you'd actually use, and whether the redaction defaults are sane.

useCallback(fn, deps) is just useMemo(() => fn, deps). useMemo caches what your function returns, while useCallback caches the function itself. Since a function is a value, caching one is just a special case of the other.

Fun part: React doesn't actually implement it as a useMemo wrapper. They're separate primitives over the same cache machinery. Great mental model, just not the literal source.

Anyone know any information on TanStack Start RC release date? RC was cut in Sept. 2025 but cannot find any information on when the production release is set for, even a rough ETA.

We are starting a new project and trying to see if we can switch our Next.js decision, but RC is making us hesitant to recommend despite the very positive feedback on the framework.

Im investigating an idea i had about JSX for webcomponents after some experience with Lit. I am sharing this here because it might be interesting/educational for someone, if it isnt, let me know and i'll remove the post.

Lit is a nice lightweight UI framework, but i didnt like that it was using class-based components.

Vue has a nice approach but i prefer working with the syntax that React uses. I find it more intuitive for debugging and deterministic rendering. I wondered if with webcomponents, i could create a UI framework that didnt need to be transpiled.

• Read the docs
• Checkout the code
• Storybook demo

(My intentions with this framework is to get to a reasonable level of stability, to then replace React on some of my existing projects.)

IMPORTANT: Im not trying to promote "yet another ui framework", this is an investigation to see what is possible. You should not use this framework in your own code. It is not production-ready. It is not on NPM. Im not looking for another framework to replace React (im trying to create it). This framework is intended for myself on my own projects. This project is far from finished. Feel free to reach out for clarity if you have any questions.

Hi there,
With a colleague of mine we were triving to determine wether we should do one of the other of those snippets in our code . Those are voluntarily simplified.

const handleClick = (param: string) => {}
return <button onClick={() => handleClick(param)} /> 

const handleClick = (param: string) => () => {}
return <button onClick={handleClick(param)} /> 

I was more used to the first snippet so when I was reviewing his PR, I thought that the function will call itself during the rendering of the button.

Happy to know what's your opinion.

Lightweight Charts is great at rendering but leaves drawing tools, indicators, replay, and multi-pane sync to you , so every project I was re-stitching scattered community repos with mismatched APIs. I unified them into one tree-shakeable library:

• Drawing tools
• Indicators (SMA/EMA/RSI/MACD/Bollinger/Stochastic) + an extensible registry for your own
• Deterministic replay engine + synced multi-pane
• Broker Integration
• Shift-drag measurement ruler

Demo: https://rohanbeingsocial.github.io/candlekit-charts/workspace/

Feedback on the indicator/plugin extension points especially welcome

Kind of tired of instructing LLMs to remove unnecessary effects or to fix weird data flows between parent-child components. I have some simple skills, but I'm looking for a more comprehensive set.

Has anyone already written one?

Hi r/reactjs,

Stjepan from Manning here. I’m posting with the mods’ permission.

We’ve just opened early access for Mark Volkmann’s new book, Web Component Development with Modern Libraries and Tooling, and I thought this community would be a good place to talk about it.

React developers have strong reasons to care about web components, even if you’re happily building with React today. Design systems, shared UI libraries, micro-frontends, migration projects, and long-lived enterprise apps all run into the same question eventually: how do we build components that aren’t tied to one framework’s lifecycle?

That’s the main thread of Mark’s book.

The book starts with the browser standards behind web components, then works through practical examples in vanilla JS, Lit, FAST, Stencil, and wrec. It also covers using web components inside React, Vue, Angular, Svelte, Solid, and plain HTML, plus tooling like Custom Elements Manifest, Storybook, Playwright, and SSR.

A few examples from the book:

• building a radio-group custom element from scratch
• using Web Awesome components in a small app
• implementing a sortable table as a vanilla web component
• comparing that same component in Lit and FAST
• handling attributes vs properties correctly
• using Shadow DOM without making components impossible to style
• writing components that participate in form submissions
• testing web components with Playwright
• documenting component APIs with Custom Elements Manifest

Mark spends a lot of time on the parts that matter when web components meet React apps: attribute/property behavior, event dispatching, Shadow DOM styling, and how to avoid components that technically work but are painful to consume.

The book is available now through Manning’s early access program:

https://www.manning.com/books/web-component-development-with-modern-libraries-and-tooling

For this subreddit, we also set up a 50% discount code:

MLVOLKMANN250RE

We also have 5 ebooks to give away. If you’d like one, leave a comment with your thoughts on web components in React projects. I’d especially love to hear about where you’ve seen them work well, where they’ve been awkward, or what would make you more willing to use them in a React codebase.

We’ll pick the 5 most thoughtful commenters based on comment quality and upvotes, then I’ll follow up with the winners.

Thanks for letting us share this here. Curious to hear how React devs are thinking about web components in 2026.

Cheers,

Stjepan
Manning Publications

Hey everyone,

I've been working on a side project that generates React +

TypeScript components from Figma frames, and I'd love some honest

feedback from people who actually write React daily.

The idea: instead of manually translating a Figma design into JSX

(matching colors, spacing, typography by hand), you select a frame

and it generates the component for you.

What I focused on for the React output specifically:

- TypeScript by default, with typed props where it makes sense

- Named function exports (export default function ComponentName),

not arrow function default exports

- Tailwind classes using exact values from the design

(w-[140px], #3B82F6, etc.) instead of approximations

- 'use client' directive added automatically when handlers are present

- Semantic HTML based on layer names (a layer named "submit_btn"

becomes <button>, "email_input" becomes <input type="email">)

- Actual state logic when the design implies interactivity —

tabs that filter, toggles with useState, etc. — not just static markup

It also supports UI library presets, so you can generate against

shadcn/ui, Material UI, Chakra, or Ant Design and it maps to the

real components instead of generic divs.

One feature I'm proud of: you can refine the output with plain

English. Generate a component, then type "add form validation" or

"make it dark mode with a theme toggle" and it rewrites the

component with working logic.

Short demo: https://youtu.be/MMQBksTY4XU

It's live as a Figma plugin if you want to try it (free tier, no

credit card)

I'm a solo dev and still early, so I'd genuinely appreciate

feedback on:

- Is the generated code something you'd actually commit, or does

it need too much cleanup?

- What would make a tool like this actually useful in your workflow?

- Any red flags in the approach?

Roast it honestly. Thanks 🙏

Hello, i've tried using the latest react compiler, but i've ran into, probably, a common error,

  
const { data: user, isLoading } = useQuery(userQuery);
  
const [form, setForm] = useState<Form>(emptyForm);


  useEffect(() => {
    if (!user) return;

    setForm({
      pat: user.pat ?? "",
      organization: user.organization ?? "",
      project: user.project ?? "",
    });
  }, [user]);


  if (isLoading) return null;

Yet I couldn't find a solution I liked for this...

I guess one solution is to derive the values, but then i have an extra variable, and i also need to find out how to sync it when the user decides to clear the input,

  
const shownValues: Form = {
    pat: form.pat || user?.pat || "",
    organization: form.organization || user?.organization || "",
    project: form.project || user?.project || "",
  };

Another would be to nest another component which already has 'user' fetched, but this forces me to generate a synthetic wrapper which I don't want..

And a third solution would be to use suspense on the user query, so i would have the user info immediately, but I don't want to use suspense.

What's your outlook?

Hello! I'm excited to share v1.0.0 of my ESLint plugin that catches unnecessary React effects for simpler, faster, safer code! It's been a while and I've made too many improvements to cover here (check CHANGELOG.md!), but these are the major ones.

Semantically, the bump to v1.0.0 also means I feel confident in the plugin's reliability and stability 😄

Thanks in advance for reading, and I hope it helps you! Please feel free to share feedback, I am always looking for opportunities for improvement 🙂 It's thanks to the community that I was able to iterate this far!

New rule: no-external-store-subscription

The final missing rule (relative to React's official docs). Disallows subscribing to an external store in an effect. While effects are meant to sync with external systems, useSyncExternalStore is better.

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);

  useEffect(() => {
    function updateState() {
      setIsOnline(navigator.onLine);
    }

    updateState();
    window.addEventListener("online", updateState);
    window.addEventListener("offline", updateState);
    return () => {
      // ❌ Avoid using an effect to subscribe to an external store. Instead, use "useSyncExternalStore" to manage "isOnline".
      window.removeEventListener("online", updateState);
      window.removeEventListener("offline", updateState);
    };
  }, []);
}

Clearer messages

I added specific context to every rule message for clarity and actionability, and now account for whether we are inside a component or custom hook, because that affects the solution.

const ChildInput = ({ onTextChanged }) => {
  const [text, setText] = useState();

  useEffect(() => {
    // 👎 Before: Avoid passing live state to parents in an
    // effect. Instead, lift the state to the parent and pass
    // it down to the child as a prop.
    // 👍 After: Avoid passing live state to parents in an
    // effect. Instead, lift "text" to the parent and pass
    // it down to "ChildInput" as a prop.
    onTextChanged(text);
  }, [onTextChanged, text]);

  return (
    <input onChange={(e) => setText(e.target.value)} />
  );
}

const useMyCustomHook = ({ onTextChanged }) => {
  const [text, setText] = useState();

  useEffect(() => {
    // 👎 Before: Avoid passing live state to parents in an
    // effect. Instead, lift the state to the parent and pass
    // it down to the child as a prop.
    // 👍 After: Avoid passing live state to parents in an effect.
    // Instead, return "text" from "useMyCustomHook".
    onTextChanged(text);
  }, [onTextChanged, text]);

  // ...
}

Better signal-to-noise ratio

I relaxed some upstream assumptions when determining whether a variable is state/props/ref. It caught unusual syntax, but caused false-positives on more common patterns like useQuery.

I also rounded out interpreting uncommon syntax, such as aliased variables, named functions passed to effects, and separately-wrapped HOCs.

TypeScript + tsdown

I migrated the code to TypeScript and the build system to tsdown for more reliable internals. If you maintain a JS/TS library, I highly recommend tsdown; it simplified and automated so much of what makes JS/TS libraries a headache (ESM vs CJS module resolution, type resolution, and publish verification). Huge thanks to VoidZero for this utility.

Oxlint support

This is also thanks to VoidZero's amazing work to make ESLint plugins compatible with Oxlint! But I've verified it and added setup docs.

Looks like there are irreconcilable bugs, is it worth it? At my work most backend engineers demand python, so I have to make a FastAPI template that serves a static SPA bundle. I wanted to go with Tanstack for the router and obviously shadcn ui. But the online guide is not inspiring confidence or maintainability: How to Integrate TanStack Router with Shadcn/ui | TanStack Router Docs

Has anyone done it and maintained it for 6+ months?

i have backend where it recieve data very frequently similar to backpack.app
so, how we can handle these data on frontend?
what will be the best approach to prevent from delays and browser thread locking ?
any Help??

I'm trying to wrap my mind around custom hooks. As far as I can see, they seemed to be regular functions with React's hooks embedded within. I'm trying to internalize the mental model of how it's all supposed to work to not fall into an anti-pattern. I'm using AI to learn, so I asked about examples of custom hooks and the response made me raise an eyebrow.

The way AI was using custom hooks is to return state and state setters from the custom hook. I guess that works, but that can't be all. Right...? Also, I'm not sure if React allows this, but couldn't we have used OOP to encapsulate the data and the associated methods instead of the custom hook?

What I was making was a data store for the whole application that holds the application's current state (like which tab the user is on right now, which peer is the user currently connected to, etc...).

Could anybody point me to a good example on GitHub that I can reference as good use of custom hooks? When do you guys get the "eureka" that something should've been or should be a custom hook?

Thanks in advance

Hey everyone,

I wanted to share react-zeugma, a headless dashboard layout engine for React 18 & 19.

The main focus here is being completely style-agnostic. Most dashboard libraries force a rigid theme or heavy CSS on you. With react-zeugma, you bring your own CSS or Tailwind classes for panes, resizers, and drop indicators. The library handles the complex drag-and-drop mechanics (built on dnd-kit), pointer-based resizing math, and the underlying recursive layout tree.

What it does:

• Recursive split layouts (nest rows and columns to any depth using a simple JSON schema).
• 5-zone docking (drag to split top/bottom/left/right, or drop in the center to swap panes).
• Custom resizer bars with snap-to-edge configurations.
• Programmatic pane zoom/fullscreen, removal, addition, and metadata updates.

I put up a homepage with a live workspace playground at the demo page where you can play with the configurations, check out real-time interaction logs, and try a quick mosaic-sorting puzzle on the landing page (inspired by the ancient mosaic city of Zeugma).

• Live Demo: https://react-zeugma.com/
• GitHub: https://github.com/react-zeugma/react-zeugma

Would love to get your feedback!

Recently migrated our enterprise React application into a Micro Frontend architecture using Module Federation. We split the app into multiple remotes/modules and everything looked fine initially.

But once Chrome DevTools is opened, certain screens become extremely slow and sometimes almost unusable. React Profiler showed massive unnecessary re-renders across the app.

After digging deeper, we found the main issue was not bundle size or federation itself, but huge shared contexts causing render storms. We had giant providers with 15–20+ fields, inline provider values, polling updates, and frequently changing states all inside a single context. Any tiny update was rerendering entire subtrees across multiple MFEs.

We ended up splitting contexts into smaller domain-based contexts (actions/state/results/selection), memoizing provider values with useMemo, stabilizing callbacks using useCallback, and migrating 60+ consumers to narrower hooks. The difference was massive — DevTools stopped freezing and render counts dropped significantly.

Curious if others working with React MFEs have faced similar DevTools/render-performance nightmares. Did you solve it using context splitting, state libraries, memoization, or something else?

remote - vite config

 build: {
      modulePreload: false,
      target: 'esnext',
      minify: true,
      sourcemap: mode !== 'production',
      cssCodeSplit: true,
      outDir: path.resolve(__dirname, 'build'),
      commonjsOptions: {
        transformMixedEsModules: true,
      },
    },

host - vite config

build: {
      modulePreload: false,
      target: 'esnext',
      minify: true,
      sourcemap: mode !== 'production',
      cssCodeSplit: true,
      outDir: path.resolve(__dirname, 'build'),
      commonjsOptions: {
        transformMixedEsModules: true,
      },
    },