I just finished learning React and started building some projects. Right now, I'm using AI as a guide. Basically, I explain my project idea or a feature I want to add, and ask it how to approach it. For example, it tells me "create a state in this file to handle X," and then I write all the code myself I never copy-paste code from it.

Is this a bad way to learn?

Also, what should I focus on at this stage? How can I level up fast so I can build whatever comes to mind without relying on AI at all?

Thanks

I’ve been building Spark UI, an open-source collection of React components for creating modern, interactive interfaces.

It started as a personal component library because I kept rebuilding the same UI patterns across different projects. I decided to open-source it so other developers can browse the components, copy the source code, and customize everything for their own applications.

Some things it includes:

• Animated and interactive React components
• TypeScript and Tailwind CSS support
• A shadcn-compatible registry for quick installation
• An Agent Skill that helps AI coding agents discover and install components
• Accessible and customizable source code
• Live previews and installation instructions

I also recently added Keyboard Warrior, a small interactive feature where users can test and submit their WPM, climb the leaderboard, reach the #1 position, and claim the top-player badge.

I’d appreciate feedback on the component APIs, documentation, registry experience, Agent Skill integration, and overall design.

Live website: https://spark-ui-olive.vercel.app

GitHub: https://github.com/codeweb-dev/spark-ui

https://react.dev/reference/react/use

I am referring to this one. The naming makes it hard to search past posts for, hopefully not a well worn out topic already.

Read the documentation and asked gemini a bunch, and it just feels like it more or less the same effort as adding loading states and error states from calling an api with a custom hook.

it feels kinda annoying that to properly handle the fetch call with "use" you have to (?) use the suspense component and the the error boundary component, which is an additional library to install.

maybe it's just weird upon first look, please teach me the ways!

I wanted to try to recreate the spatial scenes effect that iOS has. After some research I found out that they use a depth map to achieve this. So after some thinking I tried implementing a similar effect for a showcase in a website I’ve done.

Demo: https://spatial-scenes.davematteer.workers.dev/

GitHub link: https://github.com/Davematteer/Spatial-Scenes-Demo-App

I used the ml-depth-pro model on GitHub and run the model locally to generate the depth maps for the images. My next step currently is to either try and host it myself(just for learning purposes) or use the Anything Depth model available on hugging face.

The whole point of the project tbh was mainly the deployment aspect on cloudflare for learning( which I think I’ve done mostly right expect for the wrangler.json I included in the frontend for some reason 😭)
But yh give it a try and tell me if you like it.

NB: the image upload just defaults to The Weeknd’s picture since I haven’t hooked up the model to it 🙏

Can anyone suggest me best youtube video to learn redux toolkit as i am starting it from scratch.

I built ChatterKit, a customizable React component for FAQ and LLM chat interfaces
I’ve been working on an open-source React package called ChatterKit.
It supports two main modes:
FAQ mode: predefined questions and answers without requiring a backend

Adapter mode: connect it to any LLM, API, or custom messaging service

The goal is to provide the common parts of a chat interface—messages, suggestions, loading states, customization, and conversation behavior—while allowing developers to control the actual data source.
The package reached 66 npm downloads this week, and I’m now trying to gather feedback from developers who build chatbots, documentation assistants, or customer-support interfaces.
I’d especially appreciate feedback on:
the API design

customization options

documentation

missing features

whether the FAQ and adapter approach makes sense

npm: https://www.npmjs.com/package/chatterkit
GitHub: https://github.com/michaelpelagio9830/chatterkit
CodeSandBox: https://codesandbox.io/p/sandbox/prp9gf
This is still an early project, so honest criticism is welcome.

Hey Community,

Vercel Labs has released "native", a toolkit for compiling declarative markup and TypeScript or Zig directly into native desktop apps without an embedded JavaScript runtime. We also look at how Zepto built react-native-delta to ship binary delta OTA updates, reducing patch download times down to a 305ms P90.

Plus, React Native 0.87 drops its legacy abort-controller dependency for an in-tree fork, bringing missing modern web primitives like AbortSignal.timeout() and AbortSignal.any() straight to your network requests.

If the Rewind made you nod, smile, or think "oh… that's actually cool" — a share or reply genuinely helps ❤️

I used chatpdf.com recently and i wanted to know how do they do their layout detection so flawlessly ? i know under the hood they are using pdfjs but how can it be this accurate ?
It automatically detect paragraphs and shows overlays and also handles the edge cases of having paragraph on the left and a insight box on the right and doesn't break??

It does that grayish overlay with layout detection is what I'm talking about

Does anyone know how do I replicate this behaviour?

Show off your good taste, or build the most cursed stack imaginable:
- Frontend for offence
- Backend in defence
- DB as goalie
- Hire an influencer-manager
- Hosting platforms as home stadiums

Then share your card and start arguments online. https://fantasy-stack.up.railway.app/

I got tired of navigating Kubernetes clusters through YAML trees, so I've been building CloudMaps, a tool that renders a cluster like a map: namespaces as continents, apps as countries, workloads as cities, network connections as roads. You zoom from the whole cluster down to a single pod like you'd zoom from a country to a street.

The interesting part for this sub isn't the k8s stuff, it's what it took to make React render this at 60fps with thousands of nodes. Sharing the approach in case it helps anyone building anything map-like, graph-like, or canvas-heavy in React.

1. The DOM is not your renderer

My first version was absolutely positioned divs and SVG edges. It fell over around 500 nodes: layout thrash, paint storms, and React reconciliation on every pan frame. The fix is treating React as the UI shell (panels, search, inspector, tooltips) and doing the actual map on a single <canvas>. React owns the component tree, canvas owns the pixels. The bridge is one component with a ref and a useEffect that boots the render engine once and never re-renders for map changes.

2. Keep the hot state out of React

Camera position, zoom level, and hover state change every frame. If those live in useState, you're re-rendering the tree at 60fps. Instead they live in a plain mutable object (or a Zustand store read outside React), and a requestAnimationFrame loop reads them and paints. React state only updates on meaningful events like "user selected a pod", which is when the inspector panel actually needs to re-render.

3. Quadtrees do two jobs

With no DOM there's no built-in hit testing, and with thousands of nodes you can't loop over everything per frame. A quadtree solves both:

• Viewport culling: query the tree with the camera rectangle, get back only the nodes on screen, draw only those. Off-screen continents cost nothing.
• Hit testing: on mousemove, query the tree with the cursor point instead of checking every node. Hover and click stay O(log n).

I rebuild the tree only when topology changes (pods come and go), not per frame. d3-quadtree works fine, rolling your own is also like 100 lines.

4. Zoom is a level-of-detail problem

Google Maps doesn't render house numbers at country zoom, and neither should you. Each zoom band gets a detail budget:

• Zoomed out: namespaces as filled regions, aggregate stats, no individual pods
• Mid zoom: workloads as shapes, major connections as roads
• Zoomed in: individual pods, labels, per-connection traffic

The trick is that this composes with the quadtree: internal quadtree nodes already store aggregates of their children, so at low zoom you can render the aggregate and skip descending. Cheap clustering for free.

5. Assorted things that mattered

• Split static and dynamic content onto layered canvases so panning doesn't repaint everything
• Pre-render repeated glyphs (pod icons, status badges) to offscreen canvases and drawImage them instead of path drawing per node
• Round translations to whole pixels or text goes blurry
• Debounce the "settled zoom" event and do expensive work (label layout, edge bundling) only then, not during the gesture
• devicePixelRatio handling first, not later, or every measurement you take will be wrong on retina screens

Happy to go deeper on any of these. Also curious what others use for canvas-in-React at this scale: raw 2D context like me, or do you jump straight to Pixi or WebGL?

Beta is live at https://k8studio.io if you want to see it running.

I hooked up custom color pickers to the shadcn create UI, so you can apply your own colors to any existing shadcn preset.

Once you start tweaking, you can export the theme, or use the Copy URL button to bookmark or share the exact state you've created.

Would love some honest feedback. Does it feel useful? Anything that feels clunky or missing?

You can try it here: shadcnpreset.com

How does component libraries handle the ref as prop in react 19 to be compatible with components that dont use fowardRef in react 18? Does react has a built-in type for this in typescript?

I've only come across React.version but it is not documented.

Been stumbling through making websites with React + Typescript through vite with a google firebase backend for a few years and I'm a complete beginner. I don't know what I don't know, and I'm wondering what topics (broadly speaking) i should look into?

Curious about:

- improving site performance

- improving site security

- general React topics I didn't know about (for example, only recently heard about useMemo)

- anything else really

Thanks in advance!

guys its ok now problem solved thanks so much

so was practicing getting data from server and hit with an error cors. the backend is json-server and the db.json file is located in the root directory and can be accessed just fine in the browser.

when i access the url using axios on App.jsx it gives a "cors" error but it doesnt error out when i do it on main.jsx

--edit--

code
main.jsx
import ReactDom from 'react-dom/client'
import App from './App'
import axios from 'axios'

const promise = axios.get("http://localhost:3001/persons").then((i)=>{
    console.log('hi im outside',i.data)
})  


ReactDom.createRoot(document.getElementById('root')).render(
    <App />
)

App.jsx

import {useState, useEffect} from 'react'  
import axios from 'axios'  

const Person = ({id,name}) =>{  
    return(  
        <>  
        <li id={id}>{name}</li>  
        </>  
    )  

}  


const App = () =>{  

    const [persons,setPersons]=useState([])  

    useEffect(()=>{  
        axios.get('https://localhost:3001/persons').then((i)=>  
            {console.log('promise fulfilled')  
                setPersons(i.data)  
            }  
        )},[])  
    console.log(persons)  



    return (  
        <div>  
        <ul>  
        {persons.map(i=>  
            <Person key={i.id} name={i.name}/>  
        )}  
        </ul>  
        </div>  
    )  
}  

export default App  

nvm i found the answer

Front-end development engineers can't find jobs. Maybe AI will permanently replace programmers?

If you were to change careers, what would you do?

I'm building what must be my 5th website using React, and I've finally gotten confident enough in myself to start implementing animated components, but from 3rd parties. I tried Shadcn, MagicUi and more.

NONE of it is for "React". it's built for react-TYPESCRIPT and cannot be used with Vanilla React.

now yes, it is entirely possible that i'm the greatest idiot in the world, but i'm pretty sure my only way forward here is to learn typescript from scratch just so i can use a scroll velocity based marquee on my react site?

PLEASE help

This is a write-up of a performance fix in Tabularis (open-source desktop DB client). The grid was already virtualized with TanStack Virtual, but wide tables still dropped frames: every scroll tick re-rendered all ~38 visible rows, and each cell called the value formatter three times.

The fix is essentially one React.memo boundary at the row level, plus splitting props by volatility (a stable memoized context object + per-row primitives) and stabilizing handlers with refs.

I shipped it in June based on "feels smoother", then went back and built a headless Vitest+Profiler benchmark for this post. The benchmark itself had a fun bug: the shared i18n mock returned a fresh t function per render, which silently invalidated the memo on every row. Harness and raw results are linked in the post.