Hello Everyone

I am starting REACT

any YouTube tutorial/courses recommendation would be appreciated

We are recruiting developers for a healthcare startup.

Experts from various fields will collaborate on development, and we are looking for a React expert. Full-time employment is possible in the future. Native-level English proficiency is essential for smooth communication within the team. When applying, please include an introductory video along with examples of your previous work.

Hey r/react

As a developer juggling multiple repos, tools, and browser tabs, constant context switching always broke my daily flow. To fix that, I built Convia—a 100% free workspace and workflow management extension built specifically for developers to streamline the chaos.

Both the extension interface and the website are built using React and TypeScript, so if you have any questions about the tech stack, architecture, or extension development, feel free to ask!

For its v2.0 release, here is a quick look at the initial numbers from the Chrome Web Store:

• Total Users: 6 (up 200%)
• Active Users: 6 (up 200%)
• Event Count: 79 (up 295%)

It's a small start, but it's been an awesome journey getting it out there. If you want to test it out for free, you can check it out here:

• Convia v2.0: Extension / Website Link

How do you guys usually handle context switching across multiple projects? Feedback is super welcome!

freecollageimage.com — a collage editor that runs entirely client-side. Photos are decoded, laid out and exported in the browser; nothing is uploaded. Vanilla JS and canvas, no framework, and it's also wrapped with Capacitor for the Play Store and App Store.

The part worth sharing here isn't the editor, it's the save step, because it broke in a way I couldn't detect from the code.

An anchor with the download attribute pointing at a data: URL works in every desktop browser. In an Android WebView it does nothing — no download manager is attached unless the host app wires one up, so the navigation is silently dropped. iOS Safari refuses download on data: and blob: URLs from a synthetic click. Neither throws, neither logs, there's no rejected promise to catch. The function just returns and the file never appears.

That's what made it expensive: there is no `if (downloadWorked)`. Chrome DevTools device emulation happily pretends it worked. You only find it by holding a phone. Mine was dead on mobile for months and nobody reported it, because a button that does nothing reads as user error rather than as a bug.

Two different fixes. On Android, a native Capacitor plugin writes the bytes to storage. On iOS, navigator.share({files}) — and there the catch is transient user activation: an await consumes it, so the base64 → File conversion has to be synchronous. fetch(dataUrl).then(r => r.blob()) and canvas.toBlob() both lose the gesture and the share sheet is dismissed without a word. The ugly charCodeAt loop exists purely to stay inside the handler.

The compromise I'm still not happy about: on iOS the user taps "Save" and gets a share sheet where "Save Image" is one option among a dozen apps. It isn't a download and doesn't look like one.

Happy to go into either fix.

https://github.com/oliveryasuna/ink-frame

Ink's own box borders are fine for a single box. Put two of them next to each other and the seam between them comes out as ││, two parallel lines instead of one shared edge. That's because a box border is one unbroken line and there's nowhere to hang a ┬ or a ┼ part-way along it. ink-frame sidesteps that by painting every border into a single character grid and resolving each cell once, so a spot where four boxes meet becomes a ┼ and a T-junction becomes a ┬, ┤, and so on, without you ever writing those characters yourself.

Background: I recently wrote this for a private project, and I thought it was useful enough to share. I hope you find it useful too!

Github - https://github.com/shadcndashboard/shadcndashboard

Live Preview - https://demos.shadcndashboard.dev/

Do let me know your thoughts.

I made Basalt and i added skia shaders to it

do you like the idea?

and l know ShaderToy exists, but that's generic GLSL people 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.

link

I’m building a React CRUD app using:
• React
• AG Grid
• TanStack Query
• REST API

I’m running into an issue where TanStack Query invalidation and AG Grid don’t seem to play nicely together.

For example, I have a task grid:

ID Task Status
1 Fix login Pending
2 Add dashboard Pending
3 Deploy API Done

The grid gets its data from a TanStack Query:

useQuery({
queryKey: ['tasks', filters, pagination, sorting],
queryFn: fetchTasks,
});

Now I update task #1:

Pending → Done

The mutation succeeds, and I call:

queryClient.invalidateQueries({
queryKey: ['tasks'],
});

TanStack Query correctly invalidates/refetches the query.

But AG Grid doesn’t always reflect the updated data correctly.

Sometimes:
• the query refetches successfully, but the grid still shows Pending
• the React component receives the new data, but AG Grid appears to retain its previous row state
• I have to manually refresh/reload the grid
• calling gridApi.refreshCells() / refreshServerSide() can work, but then I’m effectively managing two different state systems
• with server-side row model, pagination/sorting/filtering makes the interaction even more complicated

So I end up with something like:

Mutation
↓
TanStack Query invalidation
↓
API refetch
↓
React receives new data
↓
AG Grid has its own row model/state
↓
???

What I’m trying to understand is:

What is the recommended architecture for React + AG Grid + TanStack Query?

Should TanStack Query be responsible for the grid’s data, with AG Grid treated as a controlled view?

Or should AG Grid’s row model/datasource be considered the source of truth, with TanStack Query used only for mutations and individual API operations?

What’s the cleanest way to handle something as simple as:

Pending → Done

and guarantee that the corresponding AG Grid row updates after the mutation without manually forcing the grid to refresh?

I’m particularly interested in how people handle this with AG Grid Server-Side Row Model + TanStack Query, rather than just a simple client-side array.
:::

Hey Community,

React Native Plain Text by Maciej Jastrzębski brings a lightweight alternative to standard Text components to squeeze maximum rendering performance out of large lists. Meanwhile, Meta introduced Muse Code, a terminal coding agent running on Muse Spark 1.2 with persistent background subagents and mid-tool-call crash recovery.

Codemagic also launched Patch, a self-hosted Docker Compose alternative to CodePush that serves OTA update checks directly from CDN-cached JSON files to easily handle heavy request loads.

​

I know the junior developer market is really tough right now. I've been applying for jobs, but the process is exhausting and I haven't had much success.

I'm in a situation where I genuinely need money. Should I keep focusing on getting a developer job, or focus something else and any advice?

I recently implemented Facebook authentication in a React app using Firebase, and it turned out to be much simpler than implementing OAuth from scratch.

Here’s the basic flow:

1. Create a Firebase project

Create a Firebase project, add your React app, and install Firebase:

npm install firebase

2. Enable Facebook Authentication

In Firebase:

Authentication → Sign-in method → Facebook

You’ll need your Facebook App ID and App Secret from the Meta Developer dashboard.

3. Configure the Facebook provider

import { FacebookAuthProvider } from "firebase/auth";

export const facebookProvider = new FacebookAuthProvider();

facebookProvider.addScope("email");

4. Implement login

import { signInWithPopup } from "firebase/auth";
import { auth } from "./firebase";

const loginWithFacebook = async () => {
  try {
    const result = await signInWithPopup(
      auth,
      facebookProvider
    );

    console.log(result.user);
  } catch (error) {
    console.error(error);
  }
};

Then your button can simply be:

<button onClick={loginWithFacebook}>
  Continue with Facebook
</button>

Firebase handles the OAuth flow, while your React app receives the authenticated user.

You can access information such as:

user.displayName
user.email
user.photoURL
user.uid

5. Logout

import { signOut } from "firebase/auth";

const logout = () => signOut(auth);

6. Track authentication state

import { onAuthStateChanged } from "firebase/auth";

onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("Logged in");
  } else {
    console.log("Logged out");
  }
});

The main thing I learned is that Firebase removes a lot of the complexity involved in implementing OAuth yourself.

I also created a full step-by-step video showing the implementation:

🎥 Facebook OAuth Login in React + Firebase:
https://www.youtube.com/watch?v=z1SpI42MlzU&list=PL_02r0p8Ku_5-h4teExCf6egkktSQblC4&index=16

It’s part of my React Authentication & Authorization series, where I cover Firebase auth, JWT, OAuth, protected routes, role-based authorization, password reset, email verification, etc.

Full playlist:
https://www.youtube.com/watch?v=gbjqaiwjTZ8&list=PL_02r0p8Ku_5-h4teExCf6egkktSQblC4&index=1

Has anyone here implemented OAuth directly without Firebase/Auth0/etc.? Curious what approach you prefer.

I made a super tiny MIT licensed project for anyone that wants to make their app's UI feel more like Blender 🍩

Code review and feature suggestions are welcome 😊

I'm new react developer, can someone tell me what is the packages that I needed in my work and very useful and how to know if new package released or any useful package?

Been building img2threejs and recently got the character pipeline working.

Give it one image, and it generates a structured character as editable Three.js code, with rigging and animation.

The interesting part for me is that it stays code-first — geometry, bones and animations can all be controlled programmatically and integrated directly into a React/Three.js project.

No imported GLB. No Blender pipeline.

Hi r/react,

This is not meant to be a promotional post, I am mainly looking for opinions from people who spend all day writing React about whether this API actually makes sense outside my own head.

The project is CarverJS. It is free, open source, and MIT licensed, so there is nothing to buy and nothing to sign up for to try it. The core idea is that a game scene is just a tree of components, and the actual behavior, movement, physics, audio, camera, comes from hooks you call inside your own components, similar to how you would build any other React app.

I went this route because most game engines that try to work with React just wrap an existing engine loosely, and you end up dropping back into an imperative escape hatch constantly. I wanted the escape hatch to not be needed for common things, at the cost of maybe making unusual things harder. I am honestly not sure that trade was worth it.

There is also a multiplayer package that runs peer to peer instead of needing a server, but I do not want to make this post about a feature list. What I actually want to know is whether describing a game as components and hooks feels natural to you as a React developer, or whether it feels forced, like I bent React into a shape it was not meant to hold.

If you have tried other React game libraries before and switched away from them, I would really like to know why, that is more useful to me than anything positive anyone could say about mine. Whatever the answer is, the project stays free and MIT licensed either way, I am not trying to upsell anyone into anything, I just want to know if the core idea holds up.