Frontend Interview Questions: HTML CSS JavaScript React

This React interview question sounds simple…but it often reveals how well someone understands hooks 👀 “How would you access the previous state or prop in React?” React doesn’t provide a built-in usePrevious hook. Solving this correctly comes down to understanding how values persist across renders. The core idea 👇 ➡️ useRef stores a value without triggering re-renders ➡️ useEffect updates it after each render ➡️ Together, they expose the last rendered value That’s exactly what this custom usePrevious hook does. Why this hook matters 🔥 ➡️ Common React interview pattern ➡️ Clean way to compare current vs previous values ➡️ Useful for counters, animations, forms, and UI transitions ➡️ Avoids unnecessary state and extra renders ➡️ Reusable and readable I’ve attached a clean code snippet image 👇 Hook + simple counter demo. Note: This is a foundational implementation...ideal for learning and interviews, and easy to extend. 💬 BTW Have you ever needed the previous value in a real project? How did you handle it? Don't forget to share your thoughts in the comments below ⬇️ Happy coding 💙 #React #JavaScript #CustomHooks #ReactHooks #Frontend #WebDevelopment #Interviews

Preparing for a frontend interview? Don't get caught off guard. Here are the 15 most frequently asked React questions you should be ready to answer. The Checklist: Virtual DOM: How does it work and why is it faster? JSX: What is it and how does the browser read it? Components: What is the difference between Class and Functional components? State vs. Props: Explain the key differences. Lifecycle Methods: What are they (Mounting, Updating, Unmounting)? Hooks: Explain useState and useEffect. Controlled vs. Uncontrolled: How do you handle form inputs? Keys: Why are they important in Lists? HOCs: What is a Higher-Order Component? Context API: How do you avoid Prop Drilling? Fragments: Why use < > instead of <div>? Error Boundaries: How do you handle app crashes? Portals: How do you render children outside the DOM hierarchy? Redux: When should you use a global state manager? Performance: How do you use useMemo and useCallback? ## Pro Tip: Don't just memorize definitions. Be ready to explain why we use these features in real-world scenarios. Which of these do you find the trickiest to explain? Let me know in the comments! 👇 #reactjs #frontend #webdevelopment #interviewquestions #javascript #coding

🧠 React Interview Question | useEffect & State What will this React code log after the 𝐢𝐧𝐢𝐭𝐢𝐚𝐥 𝐫𝐞𝐧𝐝𝐞𝐫? 🤔 This is a classic 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 + 𝐝𝐞𝐩𝐞𝐧𝐝𝐞𝐧𝐜𝐲 array question that often appears in: - React interviews - Machine coding rounds - Frontend assessments 💡 Understanding 𝐰𝐡𝐞𝐧 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 𝐫𝐮𝐧𝐬 and 𝐡𝐨𝐰 𝐬𝐭𝐚𝐭𝐞 𝐮𝐩𝐝𝐚𝐭𝐞𝐬 trigger effects is more important than memorizing syntax. 👉 Look at the dependency array carefully. 👉 Think about the initial render vs button click. Drop your answer in the comments 👇 𝐀) 𝟎 𝐁) 𝟏 𝐂) 𝟐 𝐃) 𝐍𝐨𝐭𝐡𝐢𝐧𝐠 I’ll share the explanation in the comments 🔍 #reactjs #javascript #frontenddeveloper #webdevelopment #codinginterview #reacthooks #useeffect #codingquestions #softwaredeveloper #learnreact #developers #techinterviews

💡React Interview Question💡 What is the difference between Element and Component in React? Answer: A component is a function or a class that accepts some props as input and returns a React element. You can think of a component as a part of UI, which can be as simple as a button or as complex as an entire web page. Every JSX returned by a functional component or class component is converted to React.createElement call, which is finally converted to an object representation. So the following JSX: <h1>This is a heading</h1> when converted to React.createElement call looks like this: React.createElement("h1", null, "This is a heading"); and whose object representation looks like this: { type: 'h1', props: { children: 'This is a heading' } } So both of the following are examples of creating a React element: 1. <h1>This is a heading</h1> 2. <Header /> Because each of them is converted to React.createElement call to display that HTML DOM element on the screen. That's why, if you have worked with TypeScript, you might have seen a component definition like this: const Header = (): 𝗝𝗦𝗫.𝗘𝗹𝗲𝗺𝗲𝗻𝘁 => { return <h1>This is a heading</h1>; }; where we specify that the component returns a React Element using 𝗝𝗦𝗫.𝗘𝗹𝗲𝗺𝗲𝗻𝘁. 𝗖𝗵𝗲𝗰𝗸 𝗼𝘂𝘁 𝗺𝘆 𝗮𝗿𝘁𝗶𝗰𝗹𝗲 𝗹𝗶𝗻𝗸 𝗶𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗺𝗲𝗻𝘁 𝘁𝗼 𝗹𝗲𝗮𝗿𝗻 𝗵𝗼𝘄 𝘁𝗼 𝗯𝘂𝗶𝗹𝗱 𝗯𝗮𝗯𝗲𝗹 𝘁𝗿𝗮𝗻𝘀𝗽𝗶𝗹𝗲𝗿 𝗳𝗿𝗼𝗺 𝘀𝗰𝗿𝗮𝘁𝗰𝗵. 𝘍𝘰𝘳 𝘮𝘰𝘳𝘦 𝘴𝘶𝘤𝘩 𝘶𝘴𝘦𝘧𝘶𝘭 𝘤𝘰𝘯𝘵𝘦𝘯𝘵, 𝘥𝘰𝘯'𝘵 𝘧𝘰𝘳𝘨𝘦𝘵 𝘵𝘰 𝘧𝘰𝘭𝘭𝘰𝘸 𝘮𝘦. #javascript #reactjs #nextjs #webdevelopment

⚛️ Top 150 React Interview Questions – 36/150 📌 Topic: React Fragments 🔹 WHAT is it? A React Fragment allows you to group multiple elements without adding extra nodes to the DOM. Normally, React components must return a single root element. Fragments let you return multiple elements without wrapping them in an unnecessary <div>. 🔹 WHY is it designed this way? React requires a single parent element for every component’s return. Clean DOM: Avoids “Div Soup” caused by unnecessary wrapper <div>s, keeping the HTML structure clean. Semantic HTML: Extra <div>s can break layouts like CSS Flexbox or Grid. Fragments preserve correct parent-child relationships. Performance: Smaller DOM trees use less memory and render slightly faster. 🔹 HOW do you do it? (The Implementation) Method 1: Long Syntax import { Fragment } from 'react'; function List() { return ( <Fragment> <li>Item 1</li> <li>Item 2</li> </Fragment> ); } Method 2: Short Syntax (Preferred) function List() { return ( <> <li>Item 1</li> <li>Item 2</li> </> ); } 🔹 WHERE are the best practices? When to Use: Use Fragments when returning multiple sibling elements (like <li> or <td>) where a wrapper <div> would break HTML or CSS. Keyed Fragments: Use <Fragment key={id}> when rendering lists with .map(). The short <> </> syntax does not support keys. Accessibility: Fragments help maintain proper semantic structure, such as keeping <dt> and <dd> inside <dl> without interruption. 📝 Summary for your notes: A React Fragment is like Invisible Tape 🫥 It holds elements together temporarily but leaves no trace in the final DOM. 👇 Comment “React” if this series is helping you 🔁 Share with someone preparing for React interviews #ReactJS #FrontendDevelopment #ReactInterview #JavaScript #WebDevelopment #LearningInPublic #Top150ReactQuestions

• Top 10 React Interview Questions You MUST Know • (Part 1) 1: What is React? A JavaScript library for building fast, component-based user interfaces. 2: What are components? Reusable, independent UI pieces that return JSX. 3: What is JSX? A syntax extension that lets you write HTML-like code inside JavaScript. 4: Difference between props and state? Props are read-only inputs; state is mutable and managed within the component. 5: What is the Virtual DOM? A lightweight copy of the real DOM that improves performance by minimizing direct updates. 6: What are hooks? Functions that let you use state and lifecycle features in functional components. 7: What is useState? A hook used to manage local component state. 8: What is useEffect used for? Handling side effects like data fetching, subscriptions, or DOM updates. 9: What is conditional rendering? Rendering UI based on conditions using if, ternary operators, or logical &&. 10: What are keys in React lists? Unique identifiers that help React efficiently update list items. ➡️ Part 2 coming soon (advanced hooks, lifecycle, performance) Save this for your next interview! 🔖 #TechInterview #ReactJS #InterviewPrep #CodingInterview

🚀 Top 150 React Interview Questions — 14/150 ⚛️ 🧠 Functional vs. Class Components In React, there are two ways to write components — Functional and Class. However, in modern React development, the choice is quite clear. ⚙️ What are they? 🔹 Functional Components Plain JavaScript functions that accept props and return JSX 👉 Modern and recommended approach 🔹 Class Components ES6 classes extending React.Component 👉 Old standard (pre-2019), uses the render() method ✨ Why React shifted to Functional Components: 📖 Simpler syntax with less boilerplate code 🚫 No confusing this keyword ⚡ Better performance and smaller bundle size 🧩 State & Lifecycle handling: Functional → Hooks (useState, useEffect) Class → this.state, this.setState, lifecycle methods 🔁 Logic reuse: Functional → Custom Hooks (easy and clean) Class → HOCs / Render Props (complex) 📍 Where they are used today: 🆕 New projects → Almost 100% Functional Components with Hooks 🧓 Legacy codebases → Class Components (important to understand, but not preferred for new code) 📌 Easy way to remember: Class Components = 📷 Old DSLR (powerful but complex) Functional Components = 📱 Smartphone camera (simple, smart, efficient) 👇 Comment “React” if this series helps you. #ReactJS #FunctionalComponents #ClassComponents #JavaScript #ReactInterview #FrontendDevelopment #LearningInPublic #ReactFundamentals

React Interview Question | useEffect & State 🤔 What will this React code log after the initial render? This is a classic useEffect + dependency array question that often appears in: React interviews Machine coding rounds Frontend assessments 💡 Understanding when useEffect runs and how state updates trigger effects is far more important than memorizing syntax. 👉 Hints: Look carefully at the dependency array Think about initial render vs button click 👇 Drop your answer in the comments A) 0 B) 1 C) 2 D) Nothing I’ll share the explanation in the comments 🔍 #reactjs #javascript #frontenddeveloper #webdevelopment #codinginterview #reacthooks #useeffect #codingquestions #softwaredeveloper #learnreact #techinterviews