React Dev Resources: Cheat Sheets and Hooks Guide

Excited to share my newly published NPM package: `@harshil3134/utils`! 🚀 I've always found myself rewriting the same helper functions across different projects—whether it's handling deep object merges, formatting dates, handling async retries, or managing local storage safely in Next.js. So, I decided to build a comprehensive, production-grade utility library to solve this once and for all. Why `@harshil3134/utils`? ✅ 100% Type-Safe: Written in strict TypeScript. ✅ Tree-shakeable: Import only what you need (e.g., `import { retry } from '@harshil3134/utils/async'`). ✅ Zero Dependencies: Keeps your bundle size incredibly small. ✅ Environment Aware: Built-in safeguards for SSR (Next.js/Remix), Browser, and React Native. ✅ Battle-Tested: Backed by 60+ unit tests. It includes 20 different modules handling everything from strings and collections, to advanced observability tracers and React hooks. If you give it a try and encounter a bug or unexpected behavior, please don't hesitate to reach out — connect with me here on LinkedIn or open an issue on GitHub. Your real-world feedback is invaluable at this stage and I'm committed to responding quickly. Check it out on NPM and GitHub, and let me know what you think! Contributions are always welcome. 👇 🔗 NPM: https://lnkd.in/gYAWGaWm 🔗 GitHub: https://lnkd.in/g_4XTbWk #javascript #typescript #webdevelopment #reactjs #nodejs #opensource #npm #softwareengineering

I Just learned React Hooks — and it changed how I think about React. 🙌 Here's what each Hook taught me 👇 **useState** A component can remember data. When data changes, UI updates automatically. No extra code needed. **useEffect** The right place to talk to the outside world — API calls, timers, event listeners. **useContext** Passing data through every component is messy. useContext is the cleaner way. **useRef** Store a value or grab a DOM element — without causing a re-render. Quietly powerful. The real lesson? Hooks aren't just syntax. They teach you **how to think** about your component. Still learning — but these 4 finally made React click for me. 💡 Which Hook took you the longest to understand? Drop it below 👇 #ReactJS #ReactHooks #JavaScript #FrontendDevelopment #LearningReact #100DaysOfCode #LearnToCode

Mastery starts with the basics! I’ve just wrapped up a hands-on practice session building a Todo App using React and TypeScript. While it might seem like a simple project, the core logic behind it is what fuels complex, real-world applications. During this build, I focused on: State Management: Leveraging useState for dynamic data flow. Immutability: Mastering the Spread Operator [...] to handle state updates efficiently. Array Manipulation: Using .map() for rendering and .filter() to handle precise deletion logic. Type Safety: Integrating TypeScript to ensure robust data handling and catch errors during development. What's next? The logic for creating and deleting is solid, and I’m currently working on implementing a seamless Edit system to complete the full CRUD cycle! I believe that mastering these small building blocks is essential before scaling to enterprise-level projects. The journey of a thousand miles begins with a single line of code. Stay consistent, stay curious! SourceCode:https://lnkd.in/g6VFC2D5 #ReactJS #TypeScript #WebDevelopment #CodingLife #FrontendDeveloper #LearningEveryday #NextJS #JavaScript #DeveloperCommunity #BuildingInPublic

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 11/30 I called an API… and console printed: Promise { <pending> } 😐 My code looked fine: const res = fetch(url) const data = res.json() The mistake: I forgot `await`. `fetch()` does not return data. It returns a Promise. So I was logging the Promise — not the response. Fix 👇 const res = await fetch(url) const data = await res.json() Async code needs time. `await` tells JavaScript to wait for the result. Day 12 tomorrow 👀 #30DaysOfCode #javascript #reactjs #frontend #webdevelopment #codeinuse

Day 5/100 – Node.js Practical Implementation 🚀 Today I moved from theory to practical coding in Node.js. After studying several core concepts in the documentation, I started applying them by building a small backend program that simulates a real-life system. Concepts I practiced today: ✅ Node.js Modules (CommonJS vs ES Modules) ✅ Using important Core Modules like "fs", "path", "http", "os", and "process" ✅ Understanding asynchronous programming (callbacks, promises, async/await) ✅ Exploring the Node.js Event Loop ✅ Creating a simple HTTP server ✅ Learning how the request–response cycle works ✅ Understanding environment variables using "process.env" ✅ Practicing error handling in Node.js Instead of just copying code, I focused on understanding what happens behind the scenes — especially how Node.js handles asynchronous operations and how servers respond to requests. The biggest lesson today: Backend development is not just about writing code — it's about understanding how systems communicate and handle tasks efficiently. 📌 Day 5 Achievement: Built a simple Node.js server and practiced core backend concepts. Still learning. Still building. On to Day 6. 🔥 with Chris Nyeche check out the code: https://lnkd.in/eEK-eUjG #100DaysOfCode #NodeJS #BackendDevelopment #JavaScript #LearningInPublic #SoftwareEngineering

📘 Master Node.js with This Ultimate Cheat Sheet! 💚 Whether you're just starting out or need a quick refresher, this Node.js Cheat Sheet has got you covered! 🚀 ✨ What’s inside? ✅ CLI Commands – From npm init to running files with node 📦 npm Basics – Install packages like a pro 🔁 Export & Import Modules – Master module.exports and require() 📂 File System (fs) – Read and write files with ease 🌐 HTTP Server – Create your own server using http.createServer() 📡 HTTP Requests – Learn to make requests with http.request() 💡 Perfect for quick reference, revision, or just leveling up your backend skills! 📌 Save this for later and follow for more coding resources! 👨💻 Created with 💚 by Muhammad Mohsin 🔁 Like, Comment & Share to help other devs! #NodeJS #JavaScript #BackendDevelopment #CodingCheatSheet #WebDevelopment #LearnToCode #NPM #ProgrammingTips ---

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 16/30 My component received a new userId… but UI still showed the old user 😐 The reason? I wrote: useEffect(() => { fetchUser(userId) }, []) Empty dependency array means: run only once on mount. So when userId changed, React never fetched new data. Fix 👇 useEffect(() => { fetchUser(userId) }, [userId]) Dependencies tell React WHEN to re-run the effect. Missing dependency = stale UI data. Day 17 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

When your weekend starts looking boring… build a small project and brush up your skills instead 💻✨ This weekend, I built a Pagination Task using React + Vite. 🔹 Fetched product data from API 🔹 Implemented dynamic pagination logic 🔹 Added Previous / Next navigation 🔹 Calculated total pages using Math.ceil() 🔹 Managed state using React Hooks Small projects like this help strengthen fundamentals, state management, array logic, and clean component structure. Consistency > Complexity 🚀 GitHub Repo: 👉 https://lnkd.in/gDbEFWBw #ReactJS #FrontendDeveloper #JavaScript #BuildInPublic #LearningJourney #WebDevelopment

Utils in React — The unsung hero of clean code! Every React project I see has components, hooks, customHooks, pages... But the ones that are truly clean and professional? They always have one extra folder — utils. Today, Anshu Pandey Bhaiya broke down exactly what utils are, why we need them, and how to use them in real projects. And honestly? This was a "why didn't I know this earlier?" moment. 🤯 What are Utils? Utils (Utilities) are simple reusable helper functions(pure function) that handle logic that doesn't belong inside a component. Think of it like this 🍕 Component = the pizza 🧂 Utils = the ingredients prepared in the kitchen Your component just uses the result. It doesn't care how it was made. WithoutUtils → same logic copy pasted everywhere WithUtils → ✅ write once, use anywhere ✅ Keeps components clean and readable ✅ No repeated code anywhere in the project ✅ Easy to test and debug one function ✅ Feels like a professional production codebase Small folder. Massive impact. -- for reference, look at my folder structure in a given code. This is what separates beginner code from professional code and Anshu Pandey Bhaiya at Sheryians Coding School is teaching us exactly that. #React #Utils #CleanCode #WebDevelopment #ReactJS

Starting React? Then remember these 2 JSX rules 👇 ✅ JSX must return only one parent element React components can’t return multiple siblings directly. Wrap them inside a div or React Fragment. ✅ Use className, not class Because JSX is JavaScript, and class is a reserved keyword. Small rules. Big difference when learning React. 💬 Which mistake did you make first — multiple elements or class vs className? Comment 1 or 2 👇 📌 Save this for React basics 👥 Follow for simple frontend learning