Building a Command Menu in React with cmdk

React: useState vs useRef — Which one should you use for forms? While building forms in React, most of us instinctively reach for useState to handle input values. But have you ever stopped and asked — Do I really need state here? Let’s break it down. ❌ Problem with useState in such cases When you store every input value in state: Every keystroke updates state Every state update triggers a re-render Your component keeps re-rendering unnecessarily This can impact performance, especially in large forms or complex components Many times, we are not even using these values to update the UI — we just need them when the user clicks “Submit” to make an API call. In such cases, using useState is actually overkill. ✅ Better approach: useRef Instead of tracking input values in state, we can use useRef to store references to input fields. Why is this better? ✔ No unnecessary re-renders ✔ You can directly access current input values when needed ✔ Ideal when input values are only required for form submission ✔ Keeps your component lightweight and efficient In my example, I used useRef to store references to multiple input fields and accessed their values only when submitting the form. 🎯 Key takeaway 👉 If your input values are only needed for an API call and not for rendering UI, prefer useRef over useState. State is powerful — but using it everywhere is not always the best choice. Would love to hear your thoughts — how do you handle forms in React? git repo: https://lnkd.in/d_S5AJCa #React #useState #useRef #FrontendDevelopment #JavaScript #WebPerformance #ReactHooks #WebDev

🚀 Introducing an NPM Package to Bootstrap Frontend Apps in Minutes Setting up a frontend project usually means repeating the same steps — choosing a stack, configuring folders, and implementing basic authentication flows. To simplify this, I built an NPM package that helps frontend developers scaffold applications quickly and consistently. ⚙️ The package lets you choose: • React or Next.js • JavaScript or TypeScript • Tailwind CSS or SCSS • Axios or RTK Query (Redux Toolkit Query) 📦 What it generates out of the box: • Clean, scalable project structure • Login page • Signup page • OTP verification flow • Static dashboard page 🚀 Get started with one command: npx create-fe-boilerplate@latest The goal is to eliminate repetitive setup work and help developers focus on building real features faster. 😊 I’d really appreciate feedback from the frontend community and suggestions for future improvements. #FrontendDevelopment #ReactJS #NextJS #JavaScript #TypeScript #NPM #WebDevelopment #Redux #RTKQuery #TailwindCSS #OpenSource

🚀 React JS Project Folder Structure -Best Practice for Clean Code A well-organized folder structure makes your React project scalable, maintainable, and easy to collaborate on. Here’s a simple and professional structure used in real-world projects 👇 📁 react-project/ ┣ 📁 public/ → Static files ┣ 📁 src/ ┃ ┣ 📁 assets/ → Images, fonts, icons ┃ ┣ 📁 components/ → Reusable UI components (Button, Navbar, Card) ┃ ┣ 📁 pages/ → Page-level components (Home, Login, Dashboard) ┃ ┣ 📁 layouts/ → Header, Footer, Sidebar layouts ┃ ┣ 📁 routes/ → Routing configuration ┃ ┣ 📁 services/ → API calls, axios configs ┃ ┣ 📁 hooks/ → Custom React hooks ┃ ┣ 📁 context/ → Context API files ┃ ┣ 📁 utils/ → Helper functions ┃ ┣ 📁 styles/ → Global CSS, theme files ┃ ┣ 📄 App.js ┃ ┗ 📄 index.js ✨ Why this structure? ✔ Easy to scale for large projects ✔ Clean and readable code ✔ Reusable components ✔ Better team collaboration ✔ Industry standard practice 💡 Pro Tip: Keep components small, reusable, and well-named. A good structure saves hours of debugging later! #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #CodingTips #SoftwareDevelopment

So you wanna build a responsive carousel in React - it's a game changer. Simple, really: you just need a few basics to get started. Node.js version 14.0 or higher, check. A package manager like npm, yarn, or pnpm, got it. A React project, preferably version 17 or higher, and some basic knowledge of React components - you know, the usual suspects. Oh, and familiarity with JavaScript or TypeScript doesn't hurt either. Now, let's talk installation - it's a breeze. Just use your preferred package manager to install React Responsive Carousel: npm install react-responsive-carousel, yarn add react-responsive-carousel, or pnpm add react-responsive-carousel. Easy peasy. After that, import the CSS file in your main entry file, and you're good to go. Creating a simple image carousel is a walk in the park - just import the Carousel component and use it in your JSX file. It's fast. React Responsive Carousel has some amazing features, like automatic responsiveness, navigation arrows, indicators, touch support, and legend support - all the bells and whistles. But here's the thing: you can customize your carousel to fit your needs. Use props like showArrows, showIndicators, and autoPlay to make it your own. It's like building with Legos - the possibilities are endless. For more info, check out the official repository: https://lnkd.in/gV2JfYru Source: https://lnkd.in/ge4Zrn6M #React #ResponsiveCarousel #JavaScript

I recently revisited the React countdown timer. It reminded me of a mistake many of us have made at least once. Two common problems with timers in React - Memory leaks - Stale state caused by JavaScript closures The closure problem: When we create setInterval, the callback captures variables at creation time. So setInterval(() => {     setRemainingMs(remainingMs - 1000) }, 1000) This looks okay, but it is incorrect. Because remainingMs inside a closuer is frozen. The interval keeps the old value even after React re-renders. So this leads to - Frozen timers - Skipped seconds - Incorrect UI state The correct fix: use functional state update:     setRemainingMs(prev => Max.max(prev-1000, 0)) Preventing Memory Leaks: If we create something in useEffect (intervals, listeners, subscriptions), we must clean it up: return () => clearInterval(interval) Otherwise, the timer keeps running even after the component unmounts. How I remember: - If state depends on previous state -> use functional updates - If I create side effects -> I must clean them up So, React did not break my timer; JavaScript closures did, React just made them visible. If this saved you from a future bug, it was worth sharing #React #JavaScript #Frontend #WebDevelopment #CleanCode #development #devnote

🧠 State Management in React - What to Use & When One of the biggest mistakes I see: Using Redux for everything or Context for everything. Here’s the practical decision guide I use in real projects 👇 🔹 useState Use for local UI state (toggles, inputs, tabs, small filters) 🔹 useReducer Use when state transitions are complex (multi-step forms, workflows) 🔹 Lift State Up When 2–4 nearby components share state Keep it scoped to the feature. 🔹 Context API For stable global values (auth, theme, feature flags) ⚠️ Not for fast-changing state. 🔹 React Query / SWR For server data (dashboards, lists, API-heavy apps) Caching > reinventing loading logic. 🔹 Redux / Zustand For true cross-app client state (global filters, layout state, multi-page workflows) 🔹 URL State For shareable filters, sorting, pagination (underrated but powerful) 💡 Rule of thumb: If state doesn’t need to be global, don’t globalize it. Clean state design = fewer bugs + better performance. #React #Frontend #StateManagement #Redux #JavaScript #WebDevelopment #SoftwareEngineering

🚀 React User Form Project Built a User Form using React to practice controlled components and state management. ✨ Key Features: Used useState to manage form inputs Real-time data preview Input validation (name without numbers, phone number handling) Checkbox state management Clean UI with CSS Flexbox This project helped me strengthen my understanding of React hooks, form handling, and component structure. 🔧 Tech Stack: React | JavaScript | CSS #ReactJS #WebDevelopment #Frontend #JavaScript #LearningByDoing

So, you're working with lists in React and you keep seeing this warning about missing key props - it's frustrating. Keys are essential. They help React figure out what's changed, what's been added, or removed - it's like a name tag for each item. When you're rendering components conditionally, React checks the key prop to decide whether to re-render or re-mount the component - it's a big deal. If the key is different, React will unmount the old component and mount a new one, which can be a good thing, but also a bad thing, depending on the situation. For instance, imagine you have two input components with the same type, but different keys - when you switch between them, React will unmount the old input and mount a new one, because the keys are different, and that can cause some issues if you're not careful. In arrays, keys are crucial - they help React keep track of which items have changed, and if you don't use them, React may render the components in the wrong order, which can be a real problem. So, what's the solution? Use a unique and stable key for each item - it's not that hard. This will help React re-render the components correctly, and you won't have to deal with those annoying warnings anymore. And, just to clarify, the key prop doesn't prevent re-rendering, and it's not a performance optimization - it's more like a way to define the component's identity during reconciliation, so React knows whether a component should be reused or recreated. Check out this article for more info: https://lnkd.in/gwp-PtaB #React #JavaScript #WebDevelopment

So, you're working with lists in React. It's a thing. You've probably seen that warning about missing key props, right? But what's the big deal? Keys are essential - they help React keep track of changes. Think of it like a name tag at a party: it's how React identifies each item in the list. Simple. It's all about identity. Keys don't prevent re-rendering, they just define who's who. For instance, when you're using the same component in a conditional statement, React will update the existing one instead of remounting a new one - unless you add a key prop, that is. Then, React will remount the component when the key changes. It's like a fresh start. You can use keys in arrays, too. It helps React figure out what's changed, what's new, and what's gone. When you add or remove items, React uses the key to decide what to re-render. It's not about performance, though - keys are about identity. Use unique and stable keys, and you'll avoid remounting items unnecessarily. So, to sum it up: keys matter. They're not just some optional thing, they're essential for React to keep track of what's going on. Check out this article for more info: https://lnkd.in/gwp-PtaB #React #JavaScript #WebDevelopment

So you wanna build a drag-and-drop tree view in React - that's a great idea. It's like creating a digital LEGO structure, where you can move pieces around to visualize your data in a more intuitive way. He-tree-react is a powerful tool that can help you achieve this. To get started, you'll need a few things: Node.js version 14.0 or higher, a package manager like npm or yarn, and a React project set up. It's also helpful to have a basic understanding of React hooks and JavaScript. You can install he-tree-react using npm, yarn, or pnpm - just run the command and you're good to go. It's easy. He-tree-react provides a simple API for creating interactive tree structures, and you can enable drag-and-drop functionality by setting a couple of props to true. Think of it like building a tree with branches that you can drag and drop to reorder or move around. Key concepts to keep in mind: each node has an id, text, and optional children array - it's like a family tree, where each person has a name, age, and kids. And when you drag and drop nodes, you're essentially moving them to a new branch or reordering them. The library also provides features like custom node rendering, drag constraints, search and filtering, and context menus - it's like having a toolbox full of options to customize your tree view. Check out the official repository for more information: https://lnkd.in/gjCEeKmt Source: https://lnkd.in/gH4Xksh2 #React #DragAndDrop #TreeViews #JavaScript #WebDevelopment