I’ve been putting off learning React for way too long. Anyone have any recommendations for building with it

Also using:
Tailwind
Next
And nodejs

I’m thinking of starting web development, but I’m confused about where to start. Should I first learn frontend with HTML/CSS/JavaScript and then move to frameworks like React, or should I start with backend using something like Node.js?

I’m also interested in AI/ML, so I’m not sure which one I should focus on first.

What would you suggest?

>

Hello, I am trying to understand how the react compiler works and ran into a behavior that I don't quite understand.

Here is the code: https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAECAHgA4KZh4BuCANgJ4AKMEiYYAggEoIBDBswAyAmAHME3GDAFMA8mgUAjAFYJcYABQBKIsCIB6AFREAdJaImjRAL4AdTE4zZ8hIgBUBKhggDChDgCeJgIMACM2oah5FA4EQA0RLHxAEz2+sBORERwhGA4RAAmAsERRAC8JBRUNPTMbBwIXHyCwkxiktKy8kqqGlraqQm6ANw5eQVFpcEZ1WSU1HSMrOycPPxCouJSMnKKyuqaODojaeNOkzAIOLDEADzFdAB8wLMCEXYGH2l2D0ZnrQXk5HM5MK5cARiN5fAEgiEwjA0tEUpg4glkudMgZJvlqDMyp8qjUlvVVk0Nm1tp1dj0Dv1jkMRhFLsQpgSSkT5qS6itGusWpt2jtuvs+kdBqdhuj0mzrrd7kQnq9gAApADKCgAcuZCjBQhI8GgmNoPqzvuqtbr9Ybjabfrp-oDXqCnCBEiB8Wg8BIUCBsuyjEZ8gBbch4BhlaEAWQgxQQyCIDhA2xToI94AAFhAAO4ASUwOHCmCEYBQaDLCDsQA

In TableContainer1, data1 and data2 are cached using input1 and input2 respectively, which is what I expected.

But in TableContainer2, both data1 and data2 are re-computed when either input1 or input2 is changed.

It feels like some sort of trap. Why is it so?

Thank you

Hi,

Had a lead developer interview last week and I got asked heavily about the SOLID principles, polymorphism and programming patterns.

I'm familiar with a lot of the concepts, but not enough to give strong answers.

What are the main programming patterns for React that I should learn so that when asked to explain a few, I can give strong, valuable answers?

Thanks

Hey everyone,

I am a Software Engineer and I just finished building my personal portfolio. Posting here because this community gives the most honest feedback, which is exactly what I want.

🔗 www.ahmad2point0.com

A few things I tried to do differently:

1. Interactive 3D throughout the site. Not a single hero scene that you scroll past, but 3D elements that react to cursor movement and scroll position across different sections.
2. Animations with intent. Every transition has a reason. I worked hard to keep things fluid without sacrificing load time or making the site feel heavy.
3. Built like a real product. Component structure, type safety, and performance budgets, not just a template with my name pasted in.

What I am looking for:

• Honest critique on design, UX, and performance.
• Anything that feels broken on your device or browser.
• Sections that feel weak or could be cut.

Tear into it. Thanks in advance.

Hey everyone,

I recently built a small project called CookVault — an AI recipe assistant that suggests recipes based on ingredients you already have in your kitchen.

You can enter ingredients like:
“tomato, onion, potato, peas”

and it generates practical recipe suggestions using NVIDIA DeepSeek AI + Spoonacular API.

Tech stack:

• Next.js
• TypeScript
• NVIDIA AI APIs
• Spoonacular API
• Tailwind CSS

Some things I learned while building it:

• AI response optimization/prompting
• handling slow inference responses
• structuring Next.js API routes properly
• improving AI output formatting for UX

Still improving the UI/UX and recipe relevance, but the core functionality is working now.

Would genuinely appreciate feedback or feature suggestions.

Link: https://cook-vault-delta.vercel.app/

```{
  "$schema": "https://raw.githubusercontent.com/cloudflare/workers-sdk/main/packages/wrangler/config-schema.json",
  "name": "mysite",
  "compatibility_date": "2026-05-20",
  "observability": {
    "enabled": true
  },
  "assets": {
    "directory": "./dist",
    "not_found_handling": "single-page-application"
  },
  "compatibility_flags": [
    "nodejs_compat"
  ]
}
```

for context: I have little knowledge of this tech. when I view source page for any page on my site, it always shows index.html (fallback).

I am hosting my site on cloudflare,
- added _redirects file with this line: "/* /index.html 200"
- pre-rendered html files in dist
- wrangler.jsonc file

and there are many related files/code for ssr (vibe coded)

but nothing worked

Can somebody help me out this shIt im facing since many days?

Hey r/reactnative 👋 You know that feeling when you're 3 sprints deep into a project and your codebase is littered with stuff like this?

const res = await fetch('/roles/42/buttons/7', { method: 'GET' });

And then the backend team renames a route. And you have to grep through 40 files. Yeah. That. I got fed up enough to build something about it — a little CLI called typeoapi.

What it does

Point it at your OpenAPI spec (local file or a live URL) and it generates two TypeScript files automatically:

• schema.ts — all your types for paths, components, operations, the whole schema
• api.ts — the part I actually care about day to day:
• A typed ApiRoute enum (no more magic strings)
• A buildRoute() helper for path params
• *_Payload types wired directly to each endpoint's request body

Using it is literally two questions

npx typeoapi
? OpenAPI schema source: https://api.example.com/openapi.json
? Output directory: ./src/api

No flags. No config files. Just two answers and you're done.

What you end up with

import { ApiRoute, buildRoute } from './api/api';
import type { Post_Gender_Payload } from './api/api';
// Static route — just use the enum
const res = await fetch(ApiRoute.PostGenders, {
method: 'POST',
body: JSON.stringify(payload satisfies PostGenderPayload),
});
// Dynamic route — path params handled safely
const url = buildRoute(ApiRoute.RolesRoleIdButtonsButtonId, {
role_id: 42,
button_id: 7,
});
// → '/roles/42/buttons/7'

If the backend renames a route, your TypeScript just breaks at compile time. Which is exactly what you want — catch it early, not in production.

The React Native specific bit

A lot of similar tools use const enum which Metro bundler chokes on. This one uses regular enum throughout, so it works out of the box with React Native — no extra babel plugins, no workarounds.

Other things worth knowing

Works with Swagger 2.0, OpenAPI 3.0 and 3.1

Accepts JSON or YAML, local file or remote URL

Auto-singularizes path segments (/genders/ → PostGenderPayload)

All types are zero runtime cost — fully erased at compile time

Built on top of the amazing openapi-typescript by @drwpow — huge credit to him

Try it

npx typeoapi

📦 npm: npmjs.com/package/typeoapi

GitHub: github.com/KarthiKeyan05046/openapi-ts-gen It's still early days so if something breaks or a use case isn't covered, open an issue — I'm actively working on it. And if you find it useful, a ⭐ on GitHub genuinely goes a long way. Happy to answer any questions below 🙌

I was building a side project that needs discord oauth and google oauth side by side, and discord is just… smoother. consent screen is cleaner, the dev portal actually makes sense, scopes are obvious, refresh tokens behave predictably.

Google has me filling out 4 separate forms just to get the app verified. apple shoves itself in the second i ship on iOS. facebook login is basically a graveyard. github is fine but limited in what it can actually return.

is discord just better engineered, or is it a UX choice that other providers could easily copy if they cared? curious if anyone has built against multiple dev portals recently and has a real opinion.

not looking for "use clerk lol", actually want to understand why the same protocol feels so different across providers.

Most React conferences try to cover everything. React Norway 2026 focuses on the things frontend teams are actually struggling with right now.

AI agents running in the browser
Modern React architecture and async patterns
React security and how apps get hacked
Dead code elimination and healthier codebases
etc.

350 people. One stage. 10 speakers. 3 bands. Great food and even better networking.

📍 June 5th, 2026 — Rockefeller, Oslo

Hello everyone,

Wanted to share a super cool project (IMO) we have been working on. It’s a zero-dependency React data grid, called LyteNyte Grid. Check it out, and hopefully, you will find it useful and save yourself a ton of time.

Some of the reasons to use LyteNyte Grid.

• Crazy Performance: LyteNyte Grid is super light at only 40kb (gzipped) and is extremely fast. It can handle millions of rows and 10,000+ updates/sec. Based on our internal benchmarks, it is one of the fastest grids available on the market.

• Feature-rich: Brings 150+ features, most of which are free and open source. Features such as cell range selection, row master-detail, and row grouping are included for free with LyteNyte Grid. This is something we are quite proud of. There are paid libraries (I won't name them) that offer less.

• No Styling Tradeoffs: With LyteNyte Grid, you can choose whether to go headless or styled. There is basically no tradeoff when considering styling choices.

• Full Prop Driven: You can configure it declaratively from your state, whether it’s URL params, server state, Redux, or whatever else you can imagine, meaning zero sync headaches.

• Unique DX Experience: Our grid is built in React for React and has a clean declarative API, which eliminates awkward configuration workarounds.

We also recently dropped LyteNyte Grid AI Skills. This is a really nice feature if you’re using AI coding agents. It lets you describe an advanced data grid solution, and your AI agent codes it for you. We have been testing this with increasingly complex grid instances, and the results have been awesome.

All our code is publicly available on GitHub. Happy to answer any questions you may have.

If you find this helpful and like what we’re building, GitHub stars help. Feature suggestions and code contributions are always welcome.

• GitHub
• Live Demo

I’ve been seeing a lot of YouTube videos lately about developers moving from Next.js to TanStack Start. As someone still relatively new to the JS ecosystem, it’s hard for me to tell what’s real technical improvement versus YouTube hype/content monetization.

I’d love to hear from people who actually use these frameworks in production or have serious experience with them.

• What problems with Next.js are pushing people away?
• What does TanStack Start do better in practice?
• Is this mainly a DX trend, performance thing, architecture preference, or just “new shiny tool” energy?
• Would you recommend a beginner/indie developer learn TanStack Start today, or is Next.js still the safer/default choice?

Looking for honest opinions from experienced devs rather than influencer takes.

Hey folks,

Been hacking on a side project called Rendezvous for a while and figured this sub would be the right place to share it. It's a small Zoom-like video conferencing web app built with React + PeerJS, and the whole thing runs without an app server (it's just a static site on GitHub Pages).

https://preview.redd.it/ke1yehmqi72h1.png?width=3164&format=png&auto=webp&s=721b4382f9ebc6a1fa738d7139bcc7293e6b16b5

The idea is pretty simple: instead of doing a full mesh between every participant, the meeting host acts as a relay hub for both chat and media streams. So each client only keeps connections to the host, not to everyone else. Trades off some host bandwidth for avoiding the O(N²) mesh. PeerJS's public broker handles the initial signaling and that's about it.

Honestly I mostly built it because I wanted to see how far we can push WebRTC without any backend, and it turned out more usable than I expected.

Code available at: https://github.com/predatorray/rendezvous
Try it at: https://predatorray.github.io/rendezvous/

Curious if anyone here has tried similar host-as-relay setups for video conferencing, or if there are obvious things I'm missing. Also open to hearing about better ways to handle the media forwarding part.

Hi I hope you all are doing great ❤️

I´m starting as a react developer, and my only question to this moment is that if there is a way for the web to adjust when it is on a phone, like make it dynamic without going line by line adjusting when on a phone

Hi people of r/reactjs ,

I recently made this website as my first project that i have deployed, it allows you to define various configuration for various input fields, such as name, label, placeholder, required, disabled and also allows you to define default values as well as validations. Then using this, it generates a code in either typescript or javascript, based on library of your choosing. It supports, react-hook-form+zod, formik+yup, react-hook-form+yup and formik+zod.

It also allows you to save the configuration as templates in localStorage, which you can then use later. You can also paste JSON schema to create a new form.

Also this websites is only accessible on desktop, I didn't really know how I could expand it to mobile.

Plz remember this is my first project, all feedbacks are greatly appreciated, I did use some AI for help in code generation, plz don't hate for it.

Here is the github link: https://github.com/PriyamSrivastava1507/codiform

If you liked the project, then please star it on github.

I would also love to know how I can expand it more, I am thinking of adding FieldArray and Multistep forms next.

Sorry, if my English is bad, I would love to see some feedbacks and your opinion. Thank you.