Rehan Shakir’s Post

React Tip: Structure your component files Many React components become difficult to maintain because everything is written in random order inside one file. A simple structure improves readability a lot. Recommended order inside a component: 1. Imports 2. Props / Types 3. Helper or utility functions 4. State and Effects (useState, useEffect, etc.) 5. Guard clauses (loading / error handling) 6. JSX return Why this helps: • Faster understanding of the code • Easier debugging • Cleaner code reviews • Better collaboration in teams In React, performance matters — but readability matters just as much. Well-structured components make large applications easier to scale and maintain. #ReactJS #FrontendDevelopment #JavaScript #CleanCode

DAY 24 OF POSTING REACT CONTENT ⚛️ WHY DOES REACT FEEL SIMPLER? 🤔 Imagine giving directions to driver: Option 1: 👉 Turn left 👉 Slow down 👉 Take the next right Option 2: 👉 “Take me to the airport.” One controls every step. The other describes the final result. In programming: In Imperative Programming, You control how something should happen step by step. In Declarative Programming, You describe what the final result should be. React follows the Declarative approach. That’s why it feels cleaner. #ReactJS #JavaScript #Declarative #Imperative #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

🚀 React Re-renders Why does a component re-render even when props look the same? React re-renders when reference changes, not value. If you pass new objects/functions every render, React treats them as new. Example: Passing `{ user }` where `user` is recreated each render will trigger child updates. In dashboards with 100+ rows, this causes lag. Fix: Memoize values and avoid inline object creation. #ReactJS #FrontendEngineering #JavaScript

Not every React re-render is a problem. When state or props change, function components re-run, but the DOM only updates where needed. Real issues appear when you have: - Heavy calculations inside render - Changing object/function references - Props that break memoization Use useMemo and useCallback wisely not to stop re-renders, but to keep references stable. #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactTips #PerformanceOptimization #WebDev #CodingTips #LearnReact #Programming Before optimizing, ask: «Is this re-render actually expensive, or am I optimizing too early?» React is built for frequent re-renders. Understanding them beats trying to prevent them.

Today something interesting happened while I was building a Custom Date Picker in NextJS.🗓 I have used useRef many times before, but honestly I was mostly using it without fully understanding the concept behind it But today… it finally clicked.💫 While implementing the feature, I realized that: • useRef creates a mutable object • The value is stored inside .current • The value persists between renders • Updating .current does not trigger a re-render • It can also be used to directly access DOM elements The most interesting part for me was understanding why React doesn't re-render when current changes. Sometimes you don’t truly understand a concept until you build something real with it. Small learning today, but a very satisfying one. 💫 What was the React concept that took you the longest to understand❓️ #React #JavaScript #FrontendDevelopment #ReactHooks #BuildInPublic #LearningJourney

Today I learned how useEffect cleanup actually works in React — and it completely changed how I think about side effects. When we use useEffect, it runs after render. But what many beginners ignore is the cleanup function. Why is cleanup important? Prevents memory leaks Stops unnecessary API calls Removes event listeners properly Clears intervals and timeouts Example: When you add an event listener inside useEffect, you must remove it when the component unmounts. Otherwise, it keeps running in the background. That’s where cleanup comes in. useEffect(() => { const handleResize = () => console.log("Resized"); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); The function returned inside useEffect runs: Before the next effect runs When the component unmounts Small detail. Big difference in performance. React is simple — until you understand the details. #ReactJS #FrontendDeveloper #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

How JavaScript’s Single Thread Keeps React Responsive : In a single-thread system, all tasks are processed one at a time—similar to a single person completing tasks in sequence rather than multiple people working simultaneously. JavaScript and React follow this model, meaning only one operation executes at any given moment. To prevent the application from freezing, JavaScript uses the event loop and asynchronous features to shift slower or waiting tasks away from the main thread. React enhances this with Fiber, which breaks large rendering tasks into smaller, manageable pieces, allowing the browser to respond quickly to user interactions. React also updates only the necessary parts of the UI. Despite using a single thread, this intelligent workflow keeps applications fast, responsive, and user-friendly. #ReactJS #JavaScript #WebDevelopment #Frontend #SingleThread #ReactFiber #SPA #Programming #TechExplained #WebApps #UIDevelopment #AsyncJS #EventLoop #CodeTips #LearnReact #DeveloperCommunity

💻 Mini JavaScript Project – Dark Mode Toggle + Sticky Notes Today I built two small but useful JavaScript mini apps to strengthen my frontend development skills. 🔹 Dark Mode Toggle A simple UI feature that allows users to switch between light and dark themes. The selected theme is saved using localStorage, so the preference remains even after refreshing the page. 🔹 Sticky Notes App A lightweight notes system where users can: Create notes Edit notes Delete notes Store notes in localStorage so they persist after reload 📌 Technologies Used: HTML | CSS | JavaScript | LocalStorage This project helped me practice DOM manipulation, event handling, and browser storage. Always excited to keep building and learning! 🚀 #WebDevelopment #JavaScript #FrontendDevelopment #Coding #LearningByBuilding

Word & Letter Counter using React! As part of my journey learning React, I built a simple yet useful Word and Letter Counter application. ✨ Features: ✔ Real-time word count ✔ Live letter count while typing ✔ Clean and responsive UI ✔ Built using React functional components and useState hook This helped me strengthen my understanding of: 🔹 Event handling in React 🔹 State management with hooks 🔹 Component styling with CSS 🔹 Writing cleaner and more efficient logic #ReactJS #FrontendDevelopment #WebDevelopment #LearningJourney #JavaScript

Most developers meet React’s useEffect() and immediately think: "Why is this behaving so weird?" 😵💫 But the moment you understand the dependency array, everything suddenly clicks. 💡 Here’s the simple mental model that makes useEffect easy: 🔹 No dependency array useEffect(() => {}) Runs after every render. 🔹 Empty dependency array useEffect(() => {}, []) Runs only once when the component mounts. 🔹 With dependencies useEffect(() => {}, [count]) Runs every time count changes. 🔹 Cleanup function Perfect for things like timers, subscriptions, or event listeners. Example: Start a timer ⏱️ → Do something → Clean it up when the component unmounts. That small dependency array controls everything. Once you understand this concept, useEffect stops feeling confusing and starts feeling powerful. Sometimes the most confusing parts of coding are just one small concept away from clarity. 💡 Yogita Gyanani Piyush Vaswani #React #WebDevelopment #FrontendDevelopment #JavaScript #CodingTips #ReactJS