React Interview Question: What are Custom Hooks in React? Answer: Custom hooks are JavaScript functions that allow you to reuse stateful logic across multiple components. They follow the naming convention starting with "use". Example: 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘶𝘴𝘦𝘞𝘪𝘯𝘥𝘰𝘸𝘞𝘪𝘥𝘵𝘩() { 𝘤𝘰𝘯𝘴𝘵 [𝘸𝘪𝘥𝘵𝘩, 𝘴𝘦𝘵𝘞𝘪𝘥𝘵𝘩] = 𝘶𝘴𝘦𝘚𝘵𝘢𝘵𝘦(𝘸𝘪𝘯𝘥𝘰𝘸.𝘪𝘯𝘯𝘦𝘳𝘞𝘪𝘥𝘵𝘩) 𝘶𝘴𝘦𝘌𝘧𝘧𝘦𝘤𝘵(() => { 𝘤𝘰𝘯𝘴𝘵 𝘩𝘢𝘯𝘥𝘭𝘦𝘙𝘦𝘴𝘪𝘻𝘦 = () => 𝘴𝘦𝘵𝘞𝘪𝘥𝘵𝘩(𝘸𝘪𝘯𝘥𝘰𝘸.𝘪𝘯𝘯𝘦𝘳𝘞𝘪𝘥𝘵𝘩) 𝘸𝘪𝘯𝘥𝘰𝘸.𝘢𝘥𝘥𝘌𝘷𝘦𝘯𝘵𝘓𝘪𝘴𝘵𝘦𝘯𝘦𝘳("𝘳𝘦𝘴𝘪𝘻𝘦", 𝘩𝘢𝘯𝘥𝘭𝘦𝘙𝘦𝘴𝘪𝘻𝘦) 𝘳𝘦𝘵𝘶𝘳𝘯 () => 𝘸𝘪𝘯𝘥𝘰𝘸.𝘳𝘦𝘮𝘰𝘷𝘦𝘌𝘷𝘦𝘯𝘵𝘓𝘪𝘴𝘵𝘦𝘯𝘦𝘳("𝘳𝘦𝘴𝘪𝘻𝘦", 𝘩𝘢𝘯𝘥𝘭𝘦𝘙𝘦𝘴𝘪𝘻𝘦) }, []) 𝘳𝘦𝘵𝘶𝘳𝘯 𝘸𝘪𝘥𝘵𝘩 } Explanation: Custom hooks help: 1. reuse logic 2. reduce duplicate code 3. improve component readability Follow-up Interview Question: Do custom hooks share state between components? Answer: No. Explanation: Each component calling the hook gets its own independent state instance. #reactjs #CustomHooks #FrontendDevelopment #WebDevelopment
React Custom Hooks: Reusable Stateful Logic
More Relevant Posts
-
Headline: 🚀 Master Your Next React Interview: 100 Questions from Junior to Expert Preparing for a React interview can feel like trying to hit a moving target. Whether you're just starting with useState or architecting complex systems with Fiber and Server Components, you need a roadmap. I’ve compiled a comprehensive list of 100 React JS Interview Questions, categorized by difficulty, to help you (or your team) level up. 🔹 Junior: Fundamentals, JSX, and Hooks. 🔹 Intermediate: Performance, Patterns, and Logic. 🔹 Senior: Architecture, Testing, and SSR. 🔹 Expert: React Internals, Fiber, and System Design. Check out the list below and save this for your next prep session! Which of these would you find hardest to answer on the spot? 👇 #ReactJS #WebDevelopment #Frontend #CodingInterview #JavaScript #CareerGrowth
To view or add a comment, sign in
-
🚀 Frontend Interview Questions Sharing some interesting JavaScript & React interview questions that are commonly asked in frontend interviews. 1️⃣ Write code for Deep Copy without using built-in methods. 2️⃣ Write a program to generate the Fibonacci Series. 3️⃣ Write code for a Higher Order Component (HOC) in React. 4️⃣ Implement Debouncing in JavaScript. 5️⃣ Write a polyfill for Array.prototype.reduce(). 6️⃣ Explain the JavaScript Event Loop. 7️⃣ What happens internally when we type a URL in the browser and press Enter? 8️⃣ Explain the difference between call, apply, and bind in JavaScript. 9️⃣ Explain Event Bubbling and Event Capturing with examples. 🔟 What are the trade-offs between Redux and Context API? 💡 These are great questions to test JavaScript fundamentals and React knowledge. Curious to hear how you would answer these — feel free to share your thoughts in the comments 👇 #javascript #reactjs #frontenddevelopment #webdevelopment #interviewpreparation #softwareengineering
To view or add a comment, sign in
-
🚀 Cracking #ReactJS Interviews Just Got Easier! 💻 Hey LinkedIn family ! 👋 If you're preparing for a ReactJS interview or want to brush up on your core front-end skills, I’ve got something incredibly useful for you. 📘 I came across this massive compilation of 500+ React Interview Questions & Answers covering: 🔹 Core React concepts 🔹 JSX and Virtual DOM 🔹 Lifecycle methods 🔹 Hooks, Refs, Context, HOCs 🔹 Performance tips, SSR, and much more! 📌 Whether you're a fresher or an experienced dev, this guide will help you stay ahead in technical rounds and deepen your understanding. Let’s upskill, support each other, and grow together as developers! 💪🔥 Drop a ❤️ if you found this helpful or tag someone preparing for interviews. 👉 For JavaScript interview 2025 Pack: https://lnkd.in/dX7a8B6i 👉 Check Out ATS Friendly Resume: https://lnkd.in/d_kQSh76 For more interesting contents do follow Eugin Franko.W.S JavaScript w3schools.com React #Linkedin #LinkedinCommunity #Connections #viral #fyp #w3schools #expressjs #javascript #frontend #backend #developers #css #reactjs #nextjs #roadmap #webdevelopment #mern #mean #angular #nodejs #expressjs #interview #postgresql #sql #guide #useful #notes
To view or add a comment, sign in
-
Stop memorizing JavaScript. Start understanding it. I see too many React developers struggle in interviews — not because they lack talent, but because they skip the foundations. So I put together a comprehensive guide covering the 11 JavaScript concepts that interviewers test the most: 𝟬𝟭. Execution Context 𝟬𝟮. Hoisting 𝟬𝟯. Scope (Block vs Function) 𝟬𝟰. Closures 𝟬𝟱. Event Loop 𝟬𝟲. Call Stack 𝟬𝟳. Promises & Async/Await 𝟬𝟴. Prototype 𝟬𝟵. The this Keyword 𝟭𝟬. Debounce & Throttle 𝟭𝟭. Shallow vs Deep Copy This isn't just theory. Every topic includes: → Clear conceptual explanations → Real code examples with comments → Common pitfalls interviewers love to test → Actual interview Q&A pairs → A one-page cheat sheet for quick revision Whether you're preparing for your next React role or levelling up as a mid-senior developer — this is the JavaScript foundation that makes everything else click. 📄 Download the free PDF below — and share it with someone who needs it. #JavaScript #ReactJS #FrontendDevelopment #WebDevelopment #InterviewPreparation #React #Chennai #HiringNow #TechJobs #CodingInterview
To view or add a comment, sign in
-
𝐑𝐞𝐚𝐜𝐭 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 𝐈𝐧𝐟𝐢𝐧𝐢𝐭𝐞 𝐋𝐨𝐨𝐩 𝐈𝐧𝐭𝐞𝐫𝐯𝐢𝐞𝐰 𝐐𝐮𝐞𝐬𝐭𝐢𝐨𝐧 🚨 Many React developers face this problem… but can’t explain why it happens in interview. Question: Why does useEffect cause infinite loop sometimes? Example ❌ const [count, setCount] = useState(0); useEffect(() => { setCount(count + 1); }, [count]); What happens here? ➡ count changes ➡ useEffect runs ➡ setCount updates state ➡ state change triggers useEffect again ➡ loop continues forever This creates an infinite re-render loop. Correct way ✅ useEffect(() => { setCount(prev => prev + 1); }, []); Why this works? Because empty dependency array runs useEffect only once. Tip for React Interviews: Always check dependency array carefully. Most infinite loop bugs come from wrong dependencies. More React interview questions coming 🚀 #ReactJS #useEffect #FrontendDeveloper #JavaScript #WebDevelopment #CodingInterview #ReactInterview #NextJS #SoftwareDeveloper
To view or add a comment, sign in
-
-
🚀 Stop memorizing JavaScript. Start understanding it. I see too many React developers struggle in interviews — not because they lack talent, but because they skip the foundations. So I put together a comprehensive guide covering the 11 JavaScript concepts that interviewers test the most: 01. Execution Context 02. Hoisting 03. Scope (Block vs Function) 04. Closures 05. Event Loop 06. Call Stack 07. Promises & Async/Await 08. Prototype 09. The this Keyword 10. Debounce & Throttle 11. Shallow vs Deep Copy This isn't just theory. Every topic includes: → Clear conceptual explanations → Real code examples with comments → Common pitfalls interviewers love to test → Actual interview Q&A pairs → A one-page cheat sheet for quick revision Whether you're preparing for your next React role or levelling up as a mid-senior developer — this is the JavaScript foundation that makes everything else click. 📄 Download the free PDF below — and share it with someone who needs it. #JavaScript #ReactJS #FrontendDevelopment #WebDevelopment #InterviewPreparation #React #Chennai #HiringNow #TechJobs #CodingInterview
To view or add a comment, sign in
-
🚀 React Interview Series | Day 3: Why is State “Async”? You click a button, call: 👉 setCount(count + 1) 👉 then immediately: console.log(count) And boom… you still see the old value 😵 💡 The Real Talk: I’ve seen candidates panic in live coding rounds when this happens. They assume something is broken. It’s not. React is just being smart. Instead of updating state instantly, React batches updates to improve performance. 👉 Multiple state updates = ❌ multiple re-renders 👉 Batched updates = ✅ single efficient re-render 🧠 What’s Actually Happening? React waits until your function finishes execution, then processes all state updates together. That’s why you don’t see the updated value immediately. 🔥 The “Senior” Way to Handle It: If your next state depends on the previous one, never rely on the current variable. Use the functional update pattern 👇 setCount(prevCount => prevCount + 1); ✅ Always gets the latest value ✅ Works correctly even with multiple queued updates 🎯 Key Takeaway: If you understand this, you're already thinking like a senior developer. 💬 Have you ever been confused by this behavior in React? Drop your experience below 👇 #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #CodingInterview #ReactTips
To view or add a comment, sign in
-
𝗧𝗼𝗽 𝟮𝟱 𝗥𝗲𝗮𝗰𝘁 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 𝗮𝗻𝗱 𝗔𝗻𝘀𝘄𝗲𝗿𝘀 | 𝗥𝗲𝗮𝗰𝘁𝗝𝗦 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗣𝗿𝗲𝗽𝗮𝗿𝗮𝘁𝗶𝗼𝗻 In this video, we cover the most frequently asked React Interview Questions that are commonly asked in product-based and service-based companies. If you are preparing for Frontend Developer or React Developer interviews, this video will help you understand important React concepts clearly. Topics covered in this video: React Virtual DOM React Hooks (useState, useEffect) Functional vs Class Components React Lifecycle Methods React Performance Optimization Controlled vs Uncontrolled Components Props vs State React Context API React Memo, useMemo, useCallback React Rendering and Reconciliation These questions are very helpful for developers with 1–5 years of experience preparing for React interviews. #ReactJS #ReactInterviewQuestions #FrontendDeveloper #JavaScript #WebDevelopment #ReactDeveloper #CodingInterview #Programming
To view or add a comment, sign in
-
⚛️ React Interview Question Why can’t we use async/await directly inside useEffect? At first, it feels natural to write this: useEffect(async () => { const data = await fetchData(); setData(data); }, []); But React will complain. Because useEffect expects either: • nothing • or a cleanup function Example of cleanup: - useEffect(() => { const id = setInterval(() => { console.log("running..."); }, 1000); return () => clearInterval(id); }, []); When you make the effect function async, it returns a Promise, not a cleanup function. And React doesn’t know how to handle that. The Correct Pattern Define an async function inside the effect: useEffect(() => { const fetchData = async () => { const data = await getUsers(); setUsers(data); }; fetchData(); }, []); Small detail. Understanding why it happens is more important than memorizing the fix. #ReactJS #FrontendInterview #JavaScript #WebDevelopment #TechCareers
To view or add a comment, sign in
-
💊Day 4 of 30 — Next.js Interview Prep React Server Components vs Client Components — What Every Developer Must Know This is one of the most asked questions in Next.js interviews right now. Let's break it down. 👇 🖥️ Server Components (default in Next.js App Router) ✅ Render on the server ✅ Zero JavaScript sent to the browser ✅ Can directly access databases, APIs, file system ✅ Better performance & SEO ❌ Cannot use hooks (useState, useEffect) ❌ Cannot handle user interactions // app/products/page.tsx // This is a Server Component by default async function ProductsPage() { const data = await fetch('https://lnkd.in/dcfDv5pk') const products = await data.json() return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul> } 💻 Client Components ✅ Run in the browser ✅ Support hooks & interactivity ✅ Handle events, state, animations ❌ Larger bundle size ❌ Cannot directly fetch from DB 'use client' // 👈 This directive makes it a Client Component import { useState } from 'react' function Counter() { const [count, setCount] = useState(0) return <button onClick={() => setCount(count + 1)}>Count: {count}</button> } 🧠 The Golden Rule: Use Server Components by default. Only add 'use client' when you need interactivity or browser APIs. 💡 Interview Tip: If an interviewer asks "When would you choose one over the other?" — mention data fetching + SEO = Server, forms + state + events = Client. That answer alone sets you apart. 📌 Follow for Day 5 tomorrow! ♻️ Repost if this helped someone on their job hunt. #NextJS #ReactJS #WebDevelopment #FrontendDeveloper #JavaScriptInterview #30DaysOfNextJS #PakistaniDevelopers
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development