{"id":47214,"date":"2025-08-04T14:53:57","date_gmt":"2025-08-04T09:23:57","guid":{"rendered":"https:\/\/www.monster.co.th\/career-advice\/?p=47214"},"modified":"2025-08-04T15:12:19","modified_gmt":"2025-08-04T09:42:19","slug":"react-js-interview-questions-answers","status":"publish","type":"post","link":"https:\/\/www.monster.co.th\/career-advice\/react-js-interview-questions-answers\/","title":{"rendered":"50+ React JS Interview Questions with Answers [ 2026 ]"},"content":{"rendered":"\n<p>Whether you\u2019re aiming for your first <a href=\"https:\/\/www.monster.co.th\/search\/front-end-developer-jobs\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>front-end developer job <\/strong><\/a> or prepping for a senior engineering role, React.js often dominates technical interview rounds. With its wide adoption in modern web development, mastering <strong>React interview questions<\/strong> can give you an edge in your next hiring process.<\/p>\n\n\n\n<p>This guide curates 50+ carefully selected <strong>React.js interview questions and answers<\/strong> for freshers, intermediate developers, and experienced professionals alike. Each question is designed to reflect real-world use cases, help you handle interviews confidently, and strengthen your practical knowledge.<\/p>\n\n\n\n<p>We\u2019ve grouped questions by difficulty and role relevance\u2014so whether you&#8217;re revising basics or tackling complex architecture questions, you\u2019ll find exactly what you need. Let\u2019s dive into the most essential <strong>React technical questions<\/strong> for 2026.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-style-default has-background\" style=\"border-radius:8px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Quick Summary<\/h3>\n\n\n\n<p>This article provides 50+ carefully selected <strong>React.js interview questions and answers<\/strong>\u2014from beginner to advanced level. Whether you&#8217;re preparing for your first tech interview or brushing up before applying for senior roles, this comprehensive set covers practical, real-world concepts with examples, performance tips, and best practices in modern React development.<\/p>\n<\/div><\/div>\n\n\n\n<!-- Space before Related Read -->\n<div style=\"height: 15px;\"><\/div>\n\n\n\n<div style=\"text-align: center;\"><a style=\"display: inline-block; background-color: #7900c6; color: #fff; text-align: center; padding: 10px 20px; text-decoration: none; font-size: 18px; border-radius: 4px; font-weight: bold;\" href=\"https:\/\/www.monster.co.th\/search\/react-jobs\/utm_source=organic&amp;utm_medium=career-advice&amp;utm_campaign=react-js-interiew-questions\" target=\"_blank\" rel=\"noopener\">Apply for React JS Jobs<\/a><\/div>\n\n\n\n<div style=\"background-color: #abb7c245; color: #000000; padding: 0px;\">\n<h2>Table of Contents<\/h2>\n<ul>\n  <li><a href=\"#freshers\">React JS Interview Questions for Freshers<\/a><\/li>\n  <li><a href=\"#intermediate\">React JS Interview Questions for Intermediate Developers<\/a><\/li>\n  <li><a href=\"#experienced\">React JS Interview Questions for Experienced Developers<\/a><\/li>\n  <li><a href=\"#hooks\">React Functional Component &#038; Hooks Interview Questions<\/a><\/li>\n  <li><a href=\"#performance\">React Performance Optimisation Interview Questions<\/a><\/li>\n  <li><a href=\"#architecture\">Architecture-Based &#038; Scenario-Driven React Interview Questions<\/a><\/li>\n  <li><a href=\"#behavioural\">React Behavioral &#038; HR Interview Questions<\/a><\/li>\n  <li><a href=\"#more-advanced\">More Advanced React JS Interview Questions<\/a><\/li>\n  <li><a href=\"#faq\">Frequently Asked Questions (FAQs)<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"freshers\"><strong>React JS Interview Questions for Freshers<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. What is React.js, and why is it used?<\/strong><\/h3>\n\n\n\n<p><strong style=\"color: initial;\">React.js<\/strong><span style=\"color: initial;\"> is a JavaScript library developed by Facebook for building fast and interactive user interfaces, especially for single-page applications. It uses a component-based architecture, allowing developers to build encapsulated components that manage their own state and compose them into complex UIs.<\/span><\/p>\n\n\n\n<p><strong>Why React is used:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Efficient DOM (Document Object Model) updates via Virtual DOM<\/li>\n\n\n\n<li>Component reusability for better maintainability<\/li>\n\n\n\n<li>Strong ecosystem and community support<\/li>\n\n\n\n<li>Declarative approach for predictable UI rendering<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><span style=\"color: #111111; font-family: Roboto, sans-serif; font-size: 22px;\">2. What are components in React?<\/span><\/strong><\/h3>\n\n\n\n<p><span style=\"color: initial;\">Components are the building blocks of any React application. They allow you to split the UI into independent, reusable pieces. There are two main types:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Functional Components<\/strong> \u2013 Plain JavaScript functions that accept props and return JSX.<\/li>\n\n\n\n<li><strong>Class Components<\/strong> \u2013 ES6 classes that extend <code>React.Component<\/code> and include a render method.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. What is JSX in React?<\/strong><\/h3>\n\n\n\n<p><strong>JSX (JavaScript XML)<\/strong> is a syntax extension for JavaScript used with React to describe what the UI should look like. It allows you to write HTML elements directly within JavaScript.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const element = &lt;h1&gt;Hello, world!&lt;\/h1&gt;;<\/code><\/pre>\n\n\n\n<p>Under the hood, this JSX gets compiled to:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const element = React.createElement('h1', null, 'Hello, world!');<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. What is the Virtual DOM?<\/strong><\/h3>\n\n\n\n<p>The <strong>Virtual DOM<\/strong> (VDOM) is a lightweight in-memory representation of the real DOM. When the state of a component changes, React updates the Virtual DOM first, compares it with the previous version (a process called \u201cdiffing\u201d), and only updates the real DOM where necessary.<\/p>\n\n\n\n<p>This improves performance by reducing expensive direct manipulations of the browser DOM.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. What is the difference between a class component and a functional component?<\/h3>\n\n\n\n<p>Here\u2019s a comparison of both types:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Feature<\/th><th>Class Component<\/th><th>Functional Component<\/th><\/tr><\/thead><tbody><tr><td>Syntax<\/td><td>ES6 Class<\/td><td>JavaScript Function<\/td><\/tr><tr><td>State Management<\/td><td>Uses <code>this.state<\/code><\/td><td>Uses <code>useState()<\/code><\/td><\/tr><tr><td>Lifecycle Methods<\/td><td>Available<\/td><td>Handled with hooks<\/td><\/tr><tr><td>Performance<\/td><td>Slightly heavier<\/td><td>Generally faster<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><br>Today, <strong>functional components<\/strong> are preferred, especially with React Hooks, enabling them to efficiently manage state and side effects.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ffdeed\"><strong>Related Read: <a href=\"https:\/\/www.monster.co.th\/career-advice\/top-50-coding-and-programming-interview-questions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Coding and Programming Interview Questions <\/a><a href=\"https:\/\/www.monster.co.th\/career-advice\/front-end-developer-interview-questions-and-answers\/\" target=\"_blank\" rel=\"noreferrer noopener\">[ 2026 ]<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"intermediate\">React Intermediate Interview Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">6. What is the difference between controlled and uncontrolled components in React?<\/h3>\n\n\n\n<p><strong>Controlled components<\/strong> are React components where form data is handled by the component\u2019s state. In contrast, <strong>uncontrolled components<\/strong> store form data in the DOM itself, accessed via refs.<\/p>\n\n\n\n<p><strong>Example \u2013 Controlled Component:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ControlledInput()   onChange=  \/&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p><strong>Example \u2013 Uncontrolled Component:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function UncontrolledInput()  ;\n  return (\n    &lt;&gt;\n      &lt;input type=\"text\" ref=  \/&gt;\n      &lt;button onClick= &gt;Submit&lt;\/button&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p>Controlled components give you more power for validation and user feedback, but uncontrolled ones may be simpler for non-dynamic forms.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. What are React keys and why are they important?<\/h3>\n\n\n\n<p>React keys help identify which items in a list have changed, are added, or are removed. They are essential for optimal rendering and performance when rendering lists.<\/p>\n\n\n\n<p><strong>Bad Example (No Key):<\/strong><\/p>\n\n\n\n<p> &lt;\/li>)}<\/p>\n\n\n\n<p><strong>Better Example (With Unique Key):<\/strong><\/p>\n\n\n\n<p> > &lt;\/li>)}<\/p>\n\n\n\n<p>Keys must be unique among siblings, and never use array indexes as keys unless the list is static and never changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8. What is the useEffect Hook and how does it work?<\/h3>\n\n\n\n<p><code>useEffect()<\/code> is a React Hook used to handle side effects such as API calls, timers, or directly interacting with the DOM. It replaces lifecycle methods like <code>componentDidMount<\/code> and <code>componentDidUpdate<\/code> in class components.<\/p>\n\n\n\n<p><strong>Basic Example \u2013 API Fetch on Mount:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>useEffect(() =&gt;  , &#091;]); \/\/ Empty array = runs only once after initial render<\/code><\/pre>\n\n\n\n<p><strong>Common mistake:<\/strong> Forgetting the dependency array can lead to infinite re-renders.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9. What are props drilling and how do you avoid it?<\/h3>\n\n\n\n<p><strong>Props drilling<\/strong> happens when data is passed through many layers of components unnecessarily\u2014just to reach a deeply nested child. It causes tight coupling and harder maintenance.<\/p>\n\n\n\n<p><strong>How to avoid it:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use the <strong>Context API<\/strong> for global state<\/li>\n\n\n\n<li>Use <strong>state management libraries<\/strong> like Redux or Zustand<\/li>\n\n\n\n<li>Refactor components to flatten the hierarchy if possible<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">10. What is React Fragment and why is it used?<\/h3>\n\n\n\n<p>React <code>Fragment<\/code> allows grouping multiple elements without adding an extra DOM node, unlike wrapping them in a <code>&lt;div&gt;<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>return (\n  &lt;>\n    &lt;h1>Title&lt;\/h1>\n    &lt;p>Subtitle&lt;\/p>\n  &lt;\/>\n);\n\n<\/code><\/pre>\n\n\n\n<p>This helps avoid unnecessary nesting and improves rendering performance, especially when creating clean semantic HTML.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ffdeed\"><strong>Related Read: <a href=\"https:\/\/www.monster.co.th\/career-advice\/nodejs-interview-questions-answers\/\" target=\"_blank\" rel=\"noopener\" title=\"\">100+ Node.js Interview Questions and Answers [ 2026 ]<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"experienced\">React JS Interview Questions for Experienced Developers<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">11. How does React\u2019s reconciliation process work?<\/h3>\n\n\n\n<p>The reconciliation algorithm is how React determines which parts of the UI need to be re-rendered. It compares the new Virtual DOM with the previous one using a diffing algorithm. Only the changed nodes are updated in the actual DOM, making updates efficient.<\/p>\n\n\n\n<p>React uses heuristics to assume:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elements of different types produce different trees<\/li>\n\n\n\n<li>Keys help identify items in lists, enabling correct reordering<\/li>\n<\/ul>\n\n\n\n<p>Understanding reconciliation is key to writing performant apps and avoiding unnecessary re-renders.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">12. What are some performance optimisation techniques in React?<\/h3>\n\n\n\n<p>Performance tuning becomes crucial in large-scale apps. Here are several <strong>React performance optimisation techniques<\/strong> used in real projects:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Memoization:<\/strong> Use <code>React.memo<\/code> to avoid unnecessary renders of functional components.<\/li>\n\n\n\n<li><strong>Lazy Loading:<\/strong> Split code using <code>React.lazy()<\/code> and <code>Suspense<\/code>.<\/li>\n\n\n\n<li><strong>useCallback &amp; useMemo:<\/strong> Prevent expensive function re-creation.<\/li>\n\n\n\n<li><strong>Virtualisation:<\/strong> For large lists, use libraries like react-window or react-virtualised.<\/li>\n\n\n\n<li><strong>Windowing:<\/strong> Render only visible portions of a large list.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example: Using React.memo and useCallback<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const ExpensiveComponent = React.memo(( ) =&gt;  &lt;\/div&gt;;\n});\nfunction Parent()   \/&gt;\n      &lt;button onClick= &gt;Click&lt;\/button&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">13. Explain context API vs Redux. When would you use one over the other?<\/h3>\n\n\n\n<p>Both Context API and Redux can be used for state management, but they serve slightly different purposes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Context API<\/strong> is great for <em>prop drilling avoidance<\/em> and <strong>small apps<\/strong> with simple global state.<\/li>\n\n\n\n<li><strong>Redux<\/strong> is suitable for <strong>complex apps<\/strong> requiring actions, middleware, logging, and time-travel debugging.<\/li>\n<\/ul>\n\n\n\n<p><strong>When to prefer Redux:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Multiple modules need to read\/write from shared state<\/li>\n\n\n\n<li>App needs action logging or async middleware like redux-thunk<\/li>\n\n\n\n<li>You want to enforce predictable state transitions<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">14. How do you handle error boundaries in React?<\/h3>\n\n\n\n<p>Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the app.<\/p>\n\n\n\n<p><strong>They catch:<\/strong> Rendering errors, lifecycle errors, constructor issues\u2014but not event handler bugs or async code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class ErrorBoundary extends React.Component  ;\n  }\n  static getDerivedStateFromError(error)  ;\n  }\n  componentDidCatch(error, info)  \n  render()  \n    return this.props.children;\n  }\n}<\/code><\/pre>\n\n\n\n<p><strong>Usage:<\/strong> Wrap high-risk parts of your app in this component.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">15. What is the role of custom hooks in advanced React development?<\/h3>\n\n\n\n<p>Custom hooks allow developers to extract and reuse component logic across different parts of an application. They&#8217;re a way to write clean, maintainable, DRY code using shared logic.<\/p>\n\n\n\n<p><strong>Example: useWindowSize hook<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function useWindowSize()  , &#091;]);\n  return size;\n}\n\/\/ Usage:\nconst &#091;width, height] = useWindowSize();<\/code><\/pre>\n\n\n\n<p>This keeps your components clean and separates logic from UI. In larger projects, <strong>custom hooks<\/strong> become a powerful pattern for scalable React architecture.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ffdeed\"><strong>Related Read: <a href=\"https:\/\/www.monster.co.th\/career-advice\/javascript-interview-questions-and-answers\/\" target=\"_blank\" rel=\"noreferrer noopener\">100+ JavaScript Interview Questions and Answers<\/a><a href=\"https:\/\/www.monster.co.th\/career-advice\/front-end-developer-interview-questions-and-answers\/\" target=\"_blank\" rel=\"noreferrer noopener\"> [ 2026 ]<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"functional\">React Functional Component &amp; Hooks Interview Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">16. What are functional components in React, and why are they preferred today?<\/h3>\n\n\n\n<p><strong>Functional components<\/strong> are React components defined as JavaScript functions that return JSX. With the introduction of React Hooks in version 16.8, functional components can now manage state, side effects, refs, and more\u2014making them powerful and often preferred over class components.<\/p>\n\n\n\n<p><strong>Why they\u2019re preferred:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Less boilerplate code<\/li>\n\n\n\n<li>Simpler and easier to test<\/li>\n\n\n\n<li>Enhanced with hooks for full lifecycle capabilities<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Welcome( )  !&lt;\/h1&gt;;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">17. How does useState work in functional components?<\/h3>\n\n\n\n<p>The <code>useState<\/code> hook lets you add state to functional components. It returns a pair\u2014<code>[state, setState]<\/code>\u2014allowing you to read and update the state.<\/p>\n\n\n\n<p><strong>Example \u2013 Counter component:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Counter()   times&lt;\/p&gt;\n      &lt;button onClick= &gt;Click me&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p><strong>Pro tip:<\/strong> Avoid setting state directly in the body of the component\u2014it causes an infinite loop.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">18. How does the useEffect hook differ from lifecycle methods in class components?<\/h3>\n\n\n\n<p>The <code>useEffect<\/code> hook replaces lifecycle methods like <code>componentDidMount<\/code>, <code>componentDidUpdate<\/code>, and <code>componentWillUnmount<\/code> in functional components.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mount-only:<\/strong> useEffect with empty dependency array <code>[]<\/code><\/li>\n\n\n\n<li><strong>Update-only:<\/strong> useEffect with specific dependency values<\/li>\n\n\n\n<li><strong>Cleanup:<\/strong> return a function inside useEffect for unmount logic<\/li>\n<\/ul>\n\n\n\n<p><strong>Example \u2013 Subscribing to a data source and cleaning up:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>useEffect(() =&gt;  , 1000);\n  return () =&gt; clearInterval(id); \/\/ cleanup\n}, &#091;]);<\/code><\/pre>\n\n\n\n<p><strong>Common mistake:<\/strong> Forgetting to include dependencies in the array can cause stale state or bugs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">19. What is the purpose of useMemo and when should you use it?<\/h3>\n\n\n\n<p><code>useMemo()<\/code> is a performance optimisation hook used to memoise the result of a computation. It prevents recalculating expensive functions unless dependencies change.<\/p>\n\n\n\n<p><strong>Example \u2013 Avoiding slow recalculation:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const expensiveValue = useMemo(() =&gt;  , &#091;input]);<\/code><\/pre>\n\n\n\n<p>Use <code>useMemo<\/code> when your component does a heavy computation that shouldn&#8217;t re-run on every render.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">20. How is useCallback different from useMemo?<\/h3>\n\n\n\n<p>While <code>useMemo<\/code> memoises the result of a function, <code>useCallback<\/code> memoises the function itself. This is especially useful when passing callbacks to child components to prevent unnecessary re-renders.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const handleClick = useCallback(() =&gt;  , &#091;]);<\/code><\/pre>\n\n\n\n<p>Pass this to a memoised child to avoid triggering unnecessary renders.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ffdeed\"><strong>Related Read: <a title=\"\" href=\"https:\/\/www.monster.co.th\/career-advice\/javascript-es6-features-for-interviews\/\" target=\"_blank\" rel=\"noopener\">JavaScript ES6+ Features You Must Know for Interviews in [ 2026 ]<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"performance\">React Performance Optimisation Interview Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">21. What causes unnecessary re-renders in React, and how can you prevent them?<\/h3>\n\n\n\n<p>Unnecessary re-renders happen when React components re-render despite no change in their relevant state or props. This can lead to sluggish UI and wasted processing.<\/p>\n\n\n\n<p><strong>Common causes:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Parent component re-renders without prop changes<\/li>\n\n\n\n<li>Functions recreated on every render<\/li>\n\n\n\n<li>Anonymous functions passed as props<\/li>\n<\/ul>\n\n\n\n<p><strong>How to prevent:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <code>React.memo<\/code> for functional components<\/li>\n\n\n\n<li>Memoise functions using <code>useCallback<\/code><\/li>\n\n\n\n<li>Use <code>useMemo<\/code> for expensive derived values<\/li>\n\n\n\n<li>Keep components pure and minimise stateful logic<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">22. What is React.memo and when should you use it?<\/h3>\n\n\n\n<p><code>React.memo<\/code> is a higher-order component that prevents re-rendering if the component&#8217;s props haven&#8217;t changed. It works only with pure components (no side effects).<\/p>\n\n\n\n<p><strong>Use it when:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The component is frequently re-rendered with the same props<\/li>\n\n\n\n<li>Props are primitive values or shallow comparison is enough<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const Greeting = React.memo(( ) =&gt;  !&lt;\/h3&gt;;\n});<\/code><\/pre>\n\n\n\n<p>If <code>name<\/code> doesn&#8217;t change, the component won\u2019t re-render.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">23. What is code-splitting in React and why is it useful?<\/h3>\n\n\n\n<p><strong>Code-splitting<\/strong> allows you to split your app\u2019s bundle into smaller chunks, so users only load what&#8217;s necessary. This improves initial load time and app performance.<\/p>\n\n\n\n<p><strong>How to implement:<\/strong> Use <code>React.lazy<\/code> and <code>Suspense<\/code> for dynamic imports.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const Dashboard = React.lazy(() => import('.\/Dashboard'));\nfunction App()  >\n      &lt;Dashboard \/>\n    &lt;\/Suspense>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>This prevents large bundles from blocking the rendering of critical UI elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">24. How does windowing\/virtualisation improve performance in large lists?<\/h3>\n\n\n\n<p>Rendering thousands of DOM elements in a scrollable list can crash performance. <strong>Virtualisation<\/strong> renders only the visible portion of the list, reducing DOM node count.<\/p>\n\n\n\n<p><strong>Popular tools:<\/strong> react-window, react-virtualised<\/p>\n\n\n\n<p><strong>Example using react-window:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import   from 'react-window';\nfunction MyList( )  \n      itemCount= \n      itemSize= \n      width= \n    &gt;\n       ) =&gt; (\n        &lt;div style= &gt; &lt;\/div&gt;\n      )}\n    &lt;\/List&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<p>This is essential when building dashboards or real-time data tables in enterprise applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">25. What is the difference between throttling and debouncing in React?<\/h3>\n\n\n\n<p>Both are techniques for optimising event-heavy operations like scrolling, typing, or window resizing.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Debouncing:<\/strong> Delays execution until a pause in events<\/li>\n\n\n\n<li><strong>Throttling:<\/strong> Limits execution to once per time interval<\/li>\n<\/ul>\n\n\n\n<p><strong>Use case:<\/strong> Use debounce for search input (wait after typing), throttle for scroll listeners (limit execution).<\/p>\n\n\n\n<p><strong>Debounce example using lodash:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const handleInput = debounce((value) =&gt;  , 500);<\/code><\/pre>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ffdeed\"><strong>Related Read: <a href=\"https:\/\/www.monster.co.th\/career-advice\/html-and-css-interview-questions-with-answers\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML and CSS Interview Questions &amp; Answers [ 2026 ]<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"architecture\">Architecture-Based &amp; Scenario-Driven React Interview Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">26. How should you structure a scalable React project?<\/h3>\n\n\n\n<p>For large-scale applications, a flat or feature-based folder structure is often more maintainable than a layered one (e.g., separating by components, pages, styles). The goal is to make the codebase intuitive and modular.<\/p>\n\n\n\n<p><strong>Recommended structure:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>src\/\n\u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 Button\/\n\u2502   \u2502   \u251c\u2500\u2500 index.jsx\n\u2502   \u2502   \u251c\u2500\u2500 styles.css\n\u2502   \u2502   \u2514\u2500\u2500 test.js\n\u251c\u2500\u2500 features\/\n\u2502   \u251c\u2500\u2500 auth\/\n\u2502   \u251c\u2500\u2500 dashboard\/\n\u251c\u2500\u2500 hooks\/\n\u251c\u2500\u2500 utils\/\n\u251c\u2500\u2500 services\/\n\u251c\u2500\u2500 App.js\n\u251c\u2500\u2500 index.js<\/code><\/pre>\n\n\n\n<p>This separation by domain\/feature ensures encapsulation and faster onboarding for new developers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">27. How would you handle performance issues in a large, slow React app?<\/h3>\n\n\n\n<p>Performance issues typically stem from inefficient re-renders, large bundles, or non-optimised components. Here\u2019s a step-by-step optimisation flow:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <code>React Profiler<\/code> to identify bottlenecks<\/li>\n\n\n\n<li>Use <code>React.memo<\/code> and <code>PureComponent<\/code> for pure components<\/li>\n\n\n\n<li>Code-splitting via <code>React.lazy<\/code> and dynamic imports<\/li>\n\n\n\n<li>Virtualise long lists with <code>react-window<\/code><\/li>\n\n\n\n<li>Move expensive calculations to <code>useMemo<\/code><\/li>\n<\/ul>\n\n\n\n<p>Don\u2019t forget server-side rendering (SSR) and caching as non-code solutions to boost perceived performance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">28. How do you manage shared state across micro-frontends?<\/h3>\n\n\n\n<p>In enterprise setups, where React apps are split into micro-frontends, sharing state becomes non-trivial.<\/p>\n\n\n\n<p><strong>Options include:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Using an event bus (via Pub\/Sub)<\/li>\n\n\n\n<li>Leveraging <code>window<\/code> global scope (less recommended)<\/li>\n\n\n\n<li>Storing shared data in a browser-based store like <code>localStorage<\/code> or <code>IndexedDB<\/code><\/li>\n\n\n\n<li>State-sharing libraries like <code>redux-broadcast<\/code><\/li>\n<\/ul>\n\n\n\n<p>Where possible, decouple state from UI logic and keep micro-frontends independently deployable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">29. How do you architect a React app for SEO?<\/h3>\n\n\n\n<p>React apps by default are client-rendered, which poses challenges for SEO. To solve this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use SSR:<\/strong> with Next.js or similar frameworks for server-rendered HTML<\/li>\n\n\n\n<li><strong>Implement pre-rendering:<\/strong> for static content using tools like Gatsby<\/li>\n\n\n\n<li><strong>Ensure dynamic metadata:<\/strong> using React Helmet or Next.js head management<\/li>\n<\/ul>\n\n\n\n<p>SSR improves crawlability and speeds up time to first meaningful paint.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">30. How would you implement role-based access control (RBAC) in a React app?<\/h3>\n\n\n\n<p><strong>RBAC<\/strong> lets you control access to routes or UI elements based on user roles (admin, editor, viewer).<\/p>\n\n\n\n<p><strong>Steps:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Store user roles in a global context or state manager<\/li>\n\n\n\n<li>Create higher-order components (HOCs) or wrappers for protected routes<\/li>\n\n\n\n<li>Hide UI controls or redirect unauthorised users based on role checks<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Example of role-based route guard\nfunction ProtectedRoute( )   = useContext(AuthContext);\n  return allowedRoles.includes(role) ? children : &lt;Redirect to=\"\/unauthorised\" \/&gt;;\n}<\/code><\/pre>\n\n\n\n<p>This ensures security at both the navigation and component-rendering layers.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ffdeed\"><strong>Read Also: <a title=\"\" href=\"https:\/\/www.monster.co.th\/career-advice\/cypress-interview-questions\/\" target=\"_blank\" rel=\"noopener\">Most Asked Cypress Interview Questions<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"behavioural\">React Behavioural &amp; HR Interview Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">31. Tell us about a time you had to debug a complex React issue in production.<\/h3>\n\n\n\n<p>Hiring managers want to hear about your thought process. Share a specific scenario such as a broken component due to stale props, a failed API call that wasn\u2019t caught by error boundaries, or a memory leak in a large list.<\/p>\n\n\n\n<p>Focus on how you investigated the issue, tools used (React DevTools, Sentry, logs), what you learned, and what preventive measures you took after fixing it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">32. How do you approach cross-functional collaboration as a <a href=\"https:\/\/www.monster.co.th\/search\/react-developer-i-i-jobs-in-bangalore-2\" target=\"_blank\" rel=\"noopener\" title=\"\">React developer<\/a>?<\/h3>\n\n\n\n<p>Interviewers look for team players. Describe how you work with designers (to understand component specs), with backend teams (to sync APIs and contracts), and with QA (to ensure accessibility and responsiveness).<\/p>\n\n\n\n<p>Show examples where communication helped avoid rework or led to better UX outcomes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">33. What would you do if a new team member consistently pushed code that broke existing UI?<\/h3>\n\n\n\n<p>This tests your team maturity and leadership. Mention how you\u2019d first understand the root cause\u2014whether it\u2019s lack of onboarding, unclear code ownership, or testing gaps.<\/p>\n\n\n\n<p>Suggest practical steps like introducing pair programming, improving component tests, or initiating a review checklist, all while being empathetic.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">34. Describe a project where you implemented reusable UI components in React.<\/h3>\n\n\n\n<p>Share how you created a Button, Modal, or Table component that was used across the app. Talk about how you made it customisable (via props or slots), maintained design consistency, and handled accessibility (a11y) concerns.<\/p>\n\n\n\n<p>Bonus points if you mention testing it with Storybook or creating a component library.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">35. What do you do when a deadline is tight and you&#8217;re not confident the feature is bug-free?<\/h3>\n\n\n\n<p>This reveals your sense of ownership. Avoid saying &#8220;ship anyway.&#8221; Explain how you\u2019d raise risks early, prioritise critical paths, write unit tests, and collaborate with QA to minimise impact\u2014perhaps releasing behind a feature flag.<\/p>\n\n\n\n<p>Show that quality and transparency are important to you.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#ffdeed\"><strong>Related Read: <a href=\"https:\/\/www.monster.co.th\/career-advice\/react-nextjs-interview-questions-answers\/\" target=\"_blank\" rel=\"noreferrer noopener\">React.js + Next.js Interview Questions and Answers <\/a><\/strong><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"more-advanced\">Advanced React JS Interview Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">36. How do you test React components using React Testing Library?<\/h3>\n\n\n\n<p><strong>React Testing Library (RTL)<\/strong> encourages testing components the way users interact with them\u2014by querying DOM nodes instead of implementation details.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import   from '@testing-library\/react';\nimport userEvent from '@testing-library\/user-event';\nimport MyButton from '.\/MyButton';\ntest('button click updates text', () =&gt;  );<\/code><\/pre>\n\n\n\n<p>RTL is the industry-standard for unit and integration testing in React today.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">37. What\u2019s the difference between shallow rendering and full DOM rendering?<\/h3>\n\n\n\n<p><strong>Shallow rendering<\/strong> tests a component in isolation, without rendering child components. It\u2019s fast and useful for unit tests. Full rendering (e.g., with Enzyme\u2019s mount or RTL) renders the entire component tree.<\/p>\n\n\n\n<p>Use shallow when testing logic. Use full DOM when testing lifecycle or user interactions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">38. How do you implement Server-Side Rendering (SSR) in React?<\/h3>\n\n\n\n<p>React doesn\u2019t support SSR natively\u2014you typically use a framework like <strong>Next.js<\/strong> which renders components on the server and sends HTML to the client.<\/p>\n\n\n\n<p><strong>Benefits of SSR:<\/strong> SEO-friendly, faster initial load, better social sharing previews.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Example: pages\/index.js in Next.js\nexport async function getServerSideProps()   };\n}\nexport default function Home( )  &lt;\/div&gt;;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">39. What is useTransition in React 18?<\/h3>\n\n\n\n<p><code>useTransition<\/code> lets you mark non-urgent state updates as \u201ctransitions,\u201d allowing React to keep the UI responsive during heavy rendering tasks.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const &#091;isPending, startTransition] = useTransition();\nstartTransition(() =&gt;  );<\/code><\/pre>\n\n\n\n<p>This helps with deferred updates, e.g., updating search results after typing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">40. How do you ensure accessibility (a11y) in React apps?<\/h3>\n\n\n\n<p>React supports accessibility through standard HTML semantics. You should:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use semantic elements (button, nav, header)<\/li>\n\n\n\n<li>Use <code>aria-*<\/code> attributes as needed<\/li>\n\n\n\n<li>Ensure tab ordering and keyboard navigation<\/li>\n\n\n\n<li>Test using screen readers like NVDA or VoiceOver<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">41. What are Suspense and lazy in React?<\/h3>\n\n\n\n<p><code>React.lazy()<\/code> allows code-splitting by dynamically importing components. <code>Suspense<\/code> provides a fallback UI while the component loads.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const Settings = React.lazy(() =&gt; import('.\/Settings'));\n&lt;Suspense fallback= &gt;\n  &lt;Settings \/&gt;\n&lt;\/Suspense&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">42. How does React handle hydration in SSR?<\/h3>\n\n\n\n<p>Hydration is the process of attaching event listeners to the HTML already rendered by the server. React reconciles the DOM and \u201cactivates\u201d it client-side.<\/p>\n\n\n\n<p>Mismatches between server-rendered and client-rendered content can cause hydration warnings.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">43. What is Context vs Redux for state sharing?<\/h3>\n\n\n\n<p>Use Context API for lightweight global state (e.g., theme, user auth). Use Redux when your state logic is complex, involves middleware, or needs debugging tools.<\/p>\n\n\n\n<p>Redux offers fine control over how actions mutate state, useful in large enterprise apps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">44. What are controlled vs uncontrolled components?<\/h3>\n\n\n\n<p><strong>Controlled components<\/strong> rely on React state for form inputs. <strong>Uncontrolled components<\/strong> use refs to access values directly from the DOM.<\/p>\n\n\n\n<p>Use controlled for form validations, live feedback. Use uncontrolled for simple one-off inputs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">45. What\u2019s the difference between useReducer and useState?<\/h3>\n\n\n\n<p>useState is ideal for simple state values. useReducer suits more complex state logic involving multiple transitions and conditions.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const reducer = (state, action) =&gt;  ;\n    default:\n      return state;\n  }\n};\nconst &#091;state, dispatch] = useReducer(reducer,  );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">46. What are higher-order components (HOC)?<\/h3>\n\n\n\n<p>HOCs are functions that take a component and return a new one with added behaviour. They&#8217;re used for code reuse (e.g., authentication, logging, theming).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function withLogger(WrappedComponent)   \/&gt;;\n  };\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">47. How do you optimise bundle size in a large React app?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use code splitting via React.lazy<\/li>\n\n\n\n<li>Remove unused dependencies<\/li>\n\n\n\n<li>Replace large libraries with lightweight alternatives<\/li>\n\n\n\n<li>Tree shaking (enabled by default in Webpack)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">48. What is the purpose of keys in React lists?<\/h3>\n\n\n\n<p>Keys help React identify which items have changed, are added, or removed. This improves reconciliation and rendering efficiency.<\/p>\n\n\n\n<p>Always use stable, unique keys\u2014avoid array index as key unless static.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">49. How do you handle errors gracefully in a React SPA?<\/h3>\n\n\n\n<p>Use Error Boundaries for runtime crashes and centralised logging (e.g., Sentry). For async code, use try\/catch with fallback UIs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">50. What are some alternatives to Redux for state management?<\/h3>\n\n\n\n<p>Alternatives include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Context API (for simple global state)<\/li>\n\n\n\n<li>Recoil (minimal boilerplate, great DX)<\/li>\n\n\n\n<li>Zustand (fast and tiny)<\/li>\n\n\n\n<li>XState (state machines)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n<p><strong>Q1. What are the essential React JS interview topics for freshers?<\/strong><\/p>\n\n\n\n<p>Freshers should focus on JSX syntax, components, props vs state, lifecycle methods, and basic hooks like useState and useEffect. These form the foundation for entry-level React interviews.<\/p>\n\n\n\n<p><strong>Q2. Are React hooks frequently asked in interviews?<\/strong><\/p>\n\n\n\n<p>Yes, React hooks like useState, useEffect, useCallback, and useMemo are among the most commonly asked topics in modern React.js interviews.<\/p>\n\n\n\n<p><strong>Q3. How can I explain performance optimisation in React interviews?<\/strong><\/p>\n\n\n\n<p>Talk about using React.memo, useCallback, useMemo, code-splitting with lazy loading, and virtualisation for rendering large lists efficiently.<\/p>\n\n\n\n<p><strong>Q4. What are some React.js questions asked for 2+ years experience?<\/strong><\/p>\n\n\n\n<p>Interviewers may ask about context vs Redux, performance bottlenecks, SSR, component architecture, and advanced hook usage scenarios like useReducer.<\/p>\n\n\n\n<p><strong>Q5. Do React.js interviews include testing questions?<\/strong><\/p>\n\n\n\n<p>Yes, especially in mid to senior-level roles. Be prepared to answer questions about React Testing Library, Jest, mocking functions, and writing unit\/integration tests.<\/p>\n\n\n\n<p><strong>Q6. Is knowledge of Next.js required for React interviews?<\/strong><\/p>\n\n\n\n<p>It depends on the company. While not mandatory, having knowledge of Next.js for SSR, routing, and performance is a big plus for product-based companies.<\/p>\n\n\n\n<p><strong>Q7. How should I prepare for behavioural questions as a React developer?<\/strong><\/p>\n\n\n\n<p>Expect questions about debugging, cross-team collaboration, code ownership, and how you handle pressure during tight deadlines. Soft skills are critical for team roles.<\/p>\n\n\n\n<p><strong>Q8. What is the best way to practice React interview questions?<\/strong><\/p>\n\n\n\n<p>Build small projects, write component tests, and contribute to open-source. Platforms like LeetCode and GitHub can help strengthen your fundamentals and showcase real skills.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"text-align: center;\">\n \n<a style=\"display: inline-block;background-color: #7900c6;color: #fff;text-align: center;padding: 5px 10px;text-decoration: none;font-size: 18px;border-radius: 4px;font-weight: bold; margin-bottom: 5px;\" href=\"https:\/\/www.monster.co.th\/search\/python-developer-jobs\" target=\"_blank\" rel=\"noopener\">Python Developer Jobs<\/a>\n \n<a style=\"display: inline-block;background-color: #7900c6;color: #fff;text-align: center;padding: 5px 10px;text-decoration: none;font-size: 18px;border-radius: 4px;font-weight: bold; margin-bottom: 5px;\" href=\"https:\/\/www.monster.co.th\/search\/java-developer-jobs\" target=\"_blank\" rel=\"noopener\">Java Developer Jobs<\/a>\n \n \n<a style=\"display: inline-block;background-color: #7900c6;color: #fff;text-align: center;padding: 5px 10px;text-decoration: none;font-size: 18px;border-radius: 4px;font-weight: bold; margin-bottom: 5px;\" href=\"https:\/\/www.monster.co.th\/search\/front-end-developer-jobs\" target=\"_blank\" rel=\"noopener\">Front End Developer Jobs<\/a>\n \n<a style=\"display: inline-block;background-color: #7900c6;color: #fff;text-align: center;padding: 5px 10px;text-decoration: none;font-size: 18px;border-radius: 4px;font-weight: bold; margin-bottom: 5px;\" href=\"https:\/\/www.monster.co.th\/search\/backend-developer-jobs\" target=\"_blank\" rel=\"noopener\">Backend Developer Jobs<\/a>\n \n<a style=\"display: inline-block;background-color: #7900c6;color: #fff;text-align: center;padding: 5px 10px;text-decoration: none;font-size: 18px;border-radius: 4px;font-weight: bold; margin-bottom: 5px;\" href=\"https:\/\/www.monster.co.th\/search\/full-stack-developer-jobs\" target=\"_blank\" rel=\"noopener\">Full Stack Developer Jobs<\/a>\n \n<a style=\"display: inline-block;background-color: #7900c6;color: #fff;text-align: center;padding: 5px 10px;text-decoration: none;font-size: 18px;border-radius: 4px;font-weight: bold; margin-bottom: 5px;\" href=\"https:\/\/www.monster.co.th\/search\/software-developer-jobs\" target=\"_blank\" rel=\"noopener\">Software Developer Jobs<\/a>\n \n<a style=\"display: inline-block;background-color: #7900c6;color: #fff;text-align: center;padding: 5px 10px;text-decoration: none;font-size: 18px;border-radius: 4px;font-weight: bold; margin-bottom: 5px;\" href=\"https:\/\/www.monster.co.th\/search\/dot-net-developer-jobs\" target=\"_blank\" rel=\"noopener\">Dot Net Developer Jobs<\/a>\n \n \n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whether you\u2019re aiming for your first front-end developer job or prepping for a senior engineering role, React.js often dominates technical interview rounds. With its wide adoption in modern web development, mastering React interview questions can give you an edge in your next hiring process. This guide curates 50+ carefully selected React.js interview questions and answers [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":47250,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[147],"tags":[],"class_list":{"0":"post-47214","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interview-questions"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/posts\/47214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/comments?post=47214"}],"version-history":[{"count":42,"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/posts\/47214\/revisions"}],"predecessor-version":[{"id":48453,"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/posts\/47214\/revisions\/48453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/media\/47250"}],"wp:attachment":[{"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/media?parent=47214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/categories?post=47214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.monster.co.th\/career-advice\/wp-json\/wp\/v2\/tags?post=47214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}