React Top 10 Trending Interview Questions with Cross Question asked in interviews are given below : –
What is difference between useMemo and useCallback?
- useMemo memorizes the results of calculations to avoid costly recalculations.
- useCallback takes the reference to functions as an argument and memoizes it to prevent needless recreation during re-renders.
Both are optimization hooks for performance.
Cross Question:
- Where you used in your project? – I used useMemo for filtering of large data sets in dashboards and useCallback in passing stable event handlers to child components.
- Can you give me a situation? – When rendering a long list of products that are updated regularly, useMemo made filtering logic more efficient and useCallback stopped re-rendering the child components.
Why we use Functional Component instead of Class Component?
The functional components are simpler, promote cleaner syntax, and enable hooks of the state and lifecycle logic. They allow reuse of code, and testability, as well as performance improvement, such as by means of memoization. They cut down boilerplate in comparison with the class components, projects are easier to scale.
Cross Question:
- Readable syntax and hooks support — Is it sufficient? -Not syntax, but functional elements permit modular sharing of logic, with any custom hooks and minimize the coupling.
- Performance and reusability? – They render quicker, reuse logic among components, and mix better with new React features, like Suspense and Concurrent Mode.
What is Key in React Js and why it important?
List elements are unique by a key. They enable React to utilize changes in the reconciliation process, and it does not make the entire list re-render. Without keys, React can reuse wrong DOM nodes, and it will create a few problems in rendering and performance. Effective keys guarantee effective and proper updating.
Cross Question:
How does it impact performance? – With keys, React will only update elements that are changed, omitting elements that have not changed, minimizing the reconciliation efforts and increasing the speed of renders of large lists.
What is useEffect?
useEffect is used for side effects like subscriptions, timers, or DOM updates.
- No dependency: runs after every render.
- Empty array: runs once.
- With dependencies: runs only when they change. Cleanup prevents memory leaks, e.g., removing event listeners or clearing intervals.
Cross Question:
- If we don’t pass dependency? – It runs on every render.
- With dependency? -Runs only when there is a change in the listed dependencies.
- Cleanup usage? -in socket connection, event listener and intervals to prevent memory leaks.
- Example beyond API call? – Would be used with tracking resize events within the window or titling within the browser.
What is useLayoutEffect? Benefit and useCases
useLayoutEffect is synchronized after DOM updates but before paint in the browser. It can be used to measure the DOM, adjust scroll positions and to synchronize animations. It will block paint until it is done executing, so it is useful to avoid flickering on user interfaces, or to verify layouts in before rendering them.
Cross Question:
- Benefit? -It is visually consistent because it measures the DOM prior to the browser rendering it.
- Use case? – Drag-and-drop measurement in the element size or position fixing in the chat apps.
What you do for Increase Performance in React?
There are performance enhancements such as memoization (React.memo, useMemo, useCallback), large list virtualization, lazy loading and code splits. It is also useful to optimize the reconciliation with stable keys, renderless and production build settings. The performance tuning should be as small in logic as in rendering.
Cross Question:
- Hooks are important, but what more? – Trying the Suspense UI library to quickly load pre-rendered lazy-loaded components, server-side rendering to get that first paint and bundle size reduction with Webpack optimizations.
- Any project example? – Implemented React-window to virtualize a large product catalogue, which increased the speed of rendering the page dramatically.
What is Server Side Rendering &Client Side Rendering?
- CSR: Browser renders UI after JavaScript loads.
- SSR: HTML is pre-rendered on server before reaching client.
SSR will increase page ranking and page load speed.
Cross Question:
- Which one do you choose and why? – SSR is preferable in SEO-intensive apps such as blogs or online stores. With dashboards, CSR is adequate.
- How SSR impacts React? -Better first load and crawlable performance.
- What is Hydration? – React binds event handler to pre-rendered HTML so it becomes interactive.
What are the main advantages of Webpack in React?
Webpack is used to bundle assets, is hot-reloading compatible, tree-shaking friendly and has code splitting. It makes bundles smaller, performance optimal, and developer experience better. In big React apps Webpack assists in modularizing the code that enables scalable build and more speedy loading eliminating the once-unneeded modules.
Cross Question:
- Why use it in your project? – To be able to achieve lazy loading and minimize bundle size to quicken user experience.
- Benefits beyond bundling? –Achieves greater development workflow efficiency hot reload, asset management, and production optimizations.
What is Virtual DOM?
Virtual DOM is a representation of real DOM in the form of memory or in memory. React makes comparisons between the past and present virtual DOM trees using diff algorithm.
- Initial render: creates a DOM tree and renders the UI.
- On updates: nodes only update what has changed, which improves efficiency.
- Benefit: Faster rendering, better performance.
Cross Question:
- What is Reconciliation? – Process of diffing new and old trees of virtual DOM.
- Diff Algorithm? – Compares nodes level by level, assuming sibling nodes of different keys are distinct.
- How React works on this? – React manipulates only updated nodes, omitting unchanged ones.
What is React Fiber?
The new reconciliation engine is known as the React Fiber and is aimed at smooth rendering. It intelligently decomposes rendering into sub-tasks, and prioritizes it as well as supports pausing/resuming work. This enhances responsiveness when a UI is changing a lot of information, animating the UI, or working in the background.
Cross Question:
- Benefits? -Fluent user interactions and interactions with animations.
- How it works? – Fiber splits the updates in work units that can be scheduled by React at various times.
- Impact on performance in React and how? – Ensures that the main thread does not get blocked by enabling asynchronous rendering.
