React.js Notes: Core Concepts for Interviews and Projects

How I Understood useState When I first saw useState, it looked scary. Brackets. Functions. Weird syntax 😅 Then I stopped thinking like a developer and thought like a human. I asked myself: 👉 What is state in real life? State is just memory. A counter remembers a number. An input remembers text. A button remembers whether it’s clicked or not. That’s exactly what useState does. It tells React: 🧠 “Hey, remember this value. And when it changes, update the UI.” That’s it. No magic. So now I think of useState like this: One variable → current value One function → update the value Change the state → React re-renders → UI updates. Big lesson for me 👇 Don’t memorize syntax. Understand the idea behind it. Still learning. Still building. 🚀 #ReactJS #useCallback #FrontendDeveloper #LearningInPublic #Frontend #LearningInPublic #JavaScript #WebDevelopment #DeveloperJourney

🚀 React Toughest Interview Question #16 Q16: What are React portals and why are they used? Answer: React portals provide a way to render children into a DOM node that exists outside the parent component’s DOM hierarchy. They are created using: ReactDOM.createPortal(child, container) Example: function Modal({ children }) { return ReactDOM.createPortal( <div className="modal">{children}</div>, document.getElementById('modal-root') ); } Why use Portals? ✅ For rendering components like modals, tooltips, or dropdowns that should visually appear above everything else. ✅ Helps avoid CSS z-index and overflow issues caused by nesting. ✅ Keeps React component structure logical while allowing flexible DOM placement. Pro Tip: Even though portals render outside the DOM tree, events still bubble up through the React tree — maintaining consistent event handling. #React #JavaScript #Frontend #WebDevelopment #InterviewQuestions #ReactJS #UI #TechCareers

🚀 React Toughest Interview Question #16 Q16: What are React portals and why are they used? Answer: React portals provide a way to render children into a DOM node that exists outside the parent component’s DOM hierarchy. They are created using: ReactDOM.createPortal(child, container) Example: function Modal({ children }) { return ReactDOM.createPortal( <div className="modal">{children}</div>, document.getElementById('modal-root') ); } Why use Portals? ✅ For rendering components like modals, tooltips, or dropdowns that should visually appear above everything else. ✅ Helps avoid CSS z-index and overflow issues caused by nesting. ✅ Keeps React component structure logical while allowing flexible DOM placement. Pro Tip: Even though portals render outside the DOM tree, events still bubble up through the React tree — maintaining consistent event handling. #React #JavaScript #Frontend #WebDevelopment #InterviewQuestions #ReactJS #UI #TechCareers

⚛️ 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀(part 2): 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻 𝟯. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁? • useEffect handles side effects in React components. • It runs after the render. • You use it for logic outside UI rendering. 𝗖𝗼𝗺𝗺𝗼𝗻 𝘂𝘀𝗲 𝗰𝗮𝘀𝗲𝘀. • Fetch data from APIs • Subscribe to events • Update document title • Sync external systems 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻 𝟰. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗰𝗹𝗲𝗮𝗻𝘂𝗽 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗶𝗻 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁? • The cleanup function runs before the effect runs again. • It also runs when the component unmounts. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀. • It prevents memory leaks. • It stops background work. E𝘅𝗮𝗺𝗽𝗹𝗲𝘀. • Clear intervals and timeouts • Remove event listeners • Close subscriptions and connections #frontend #javascript #reactjs

Not everything in React needs state. Sometimes, you just need a reference. That’s where 👉 useRef comes in. 🔹 What is useRef? useRef is a React Hook used to: • Access DOM elements directly • Persist values between renders • Store mutable values without triggering re-render The important part? Updating a useRef value does NOT re-render the component. That’s what makes it different from useState. 💡 When Do We Use It? You typically use useRef for: • Focusing input fields • Handling timers • Storing previous values • Accessing DOM nodes • Integrating third-party libraries It’s more about control than UI updates. 🏢 Real-Time Example In a login form project, I used useRef to automatically focus the email input field when the page loaded. Instead of managing focus with state, I directly accessed the DOM element using useRef. Cleaner. Simpler. More efficient. 📌 Quick Interview Tip: useState → Triggers re-render useRef → Does NOT trigger re-render If the UI needs to update → useState If you just need a reference → useRef Tomorrow: I’ll explain React.memo in simple terms. If you're serious about mastering React fundamentals, stay connected 🚀 Saurav Singh #ReactJS #FrontendDevelopment #JavaScript #ReactDeveloper #LearningInPublic #WebDevelopment 🚀

🚀 React Interview Questions – Phase 1 (Easy) | Fundamentals & Components 🔹 Fundamentals What is React? What is a Single Page Application (SPA)? What are the advantages of SPA? What is Client-Side Rendering (CSR)? What is Server-Side Rendering (SSR)? 🔹 Components What are Functional Components? What are Class Components? What are Stateless Components? What are Pure Components? What are Composable Components? What are Render Props? What is the Children prop? What are Fragments in React? Why are Keys important in lists? #React #Frontend #JavaScript #WebDevelopment #InterviewPreparation

⚛️ React Batching — Why It Matters React doesn’t re-render on every setState. It batches multiple state updates into a single render for better performance. setCount(c => c + 1); setFlag(f => !f); 👉 2 updates 👉 1 render 🔥 React 17 vs React 18 React 17 Batching worked only inside React event handlers. Not inside setTimeout, promises, or async calls. React 18 Introduced Automatic Batching — works everywhere ✔ Events ✔ setTimeout ✔ Promises ✔ async/await (When using createRoot) 🧠 Why This Is Important Fewer re-renders Better performance Reduced reconciliation work Smoother UI ⚠️ Need Immediate Update? Use flushSync() — but carefully. 💡 Interview Insight: Functional updates (setState(prev => ...)) are safer because batching may group updates and functional updates ensure you're working with the latest state. Small concept. Big performance impact. 🚀 #ReactJS #FrontendEngineering #JavaScript #React18 #WebPerformance

🚦 How does Next.js handle routing out of the box? One of the most common Next.js interview questions 👇 In Next.js, routing is handled using a file-based routing system—no need for React Router or manual route configs. ✨ Key highlights: Files & folders automatically become routes Supports dynamic & nested routing Built-in <Link /> for fast client-side navigation SEO-friendly URLs by default 📌 If you’re preparing for Next.js interviews, this is a core concept you must understand. 🧠 Discuss Next.js interview question 💬 Have you used Pages Router or App Router in production? Share your experience! #NextJS #ReactJS #FrontendInterview #WebDevelopment #JavaScript #NextJSInterview #Infographic #FullStackDeveloper

Recently, I had an interview for a React Developer role. Sharing the questions here in case it helps someone preparing for similar roles. Some of the questions they asked: 1. What is Authentication vs Authorization? 2 What is a Virtual DOM? How is a Virtual DOM created? 3. What is Palindrome? A string that reads the same forward and backward Example: madam, level 4. How JWT is used in real projects? 5 What is HOC (Higher Order Component) in React? Overall, the round was focused on practical understanding of React, JavaScript rather than just theory. #React #JavaScript #Redux #Frontend #InterviewExperience

🔥 Hidden React Fact #3 React re-renders more than you think… and it’s NOT always bad 👀 Most devs panic when they hear “extra re-renders”. But here’s the truth 👇 👉 Re-render ≠ DOM update What actually happens: React re-runs your component function Creates a new Virtual DOM Uses the diffing algorithm Updates the real DOM only if needed 💡 Key insight React prefers cheap re-renders over complex manual optimizations. The real performance killers ❌ • Heavy calculations inside render • Unnecessary object/array recreation • Incorrect useEffect dependencies The smart approach ✅ Optimize what happens during render, not the render itself. Stop fighting re-renders. Start understanding them. This mindset shift alone can level up your React skills #HiddenReactFacts #ReactJS #FrontendDevelopment #JavaScript #ReactPerformance #WebDevelopment #NextJS #TypeScript #FrontendEngineering #DevCommunity