Top ReactJS Interview Questions and Answers

React is a JavaScript library for user interfaces, mostly for single-page apps.

Components are the building blocks of the UI in React. You can define what your UI components look like and reuse them. There are class components and functional components.

JSX (JavaScript XML) is a syntax extension to JavaScript that allows you to write HTML-like code in React. JSX gets compiled into JavaScript. 

Props (properties) are read-only data passed from the parent to the child component in React. Props allow dynamic and reusable components.

State is a way to store and manage data that can change over time in a component. It is what makes a component interactive, and a component re-renders when the data in the state changes. 

When you call setState, React will update the component's current state and then re-render the component in order to reflect the updated state in the UI.

An element is a plain object that describes a DOM node or a component, while a component is a function or class that returns elements and handles the logic and behaviour of the UI.

Use Class Components when you are working with legacy code, you require error boundaries, or you want to use lifecycle methods without using Hooks. Otherwise, use Functional Components, they're simpler and modern! 

React Virtual DOM is a light-weight representation of the real DOM, which React uses to update the UI faster. React only updates the parts of the UI that have changed instead of the whole page. The virtual DOM is fast and used by React, so you can expect better performance.  

Real DOM is slow, updates the full UI. Shadow DOM is for styling and manipulating Web Components, not related to React.

JSX needs to be transpiled because browsers do not understand JSX. After all, it is not valid JavaScript. JSX (like <h1>Hello</h1>) has to be converted into normal JavaScript (e.g., React.createElement(...)) so the browser can understand and run it, and we use a tool like Babel to accomplish this (Babel is a JavaScript transpiler)

React is a library for building web user interfaces. React Native is a framework to build mobile apps that use React. React uses HTML, and React Native uses native mobile components.

Events in React.js are actions (clicks, typing, submitting forms) performed by users. React handles events using camelCase props (e.g., onClick), and the event handlers are methods that are passed to the components. Events in React work similarly to regular DOM events, but React uses synthetic events under the hood to provide cross-browser compatibility.

React is an excellent option for creating fast, scalable and interactive user interfaces. We chose React over other frameworks like Angular because:
It provides simplicity and flexibility, and has an easy learning curve.

1. It uses JSX, which makes UI code easier to understand and write.
2. It has a component-based architecture for reusable UI.
3. It provides excellent performance with virtual DOM.
4. It has a large ecosystem and community.

The useEffect hook allows you to perform side effects in functional components. A side effect is anything that affects something outside the component or which happens after rendering has occurred.

This could include: getting data from an API, changing the title of the browser tab, setting up a timer (setTimeout, setInterval), adding listeners, and interacting with local storage.

When using React, you use useEffect to perform these side effects safely in functional components. It is similar to the lifecycle methods componentDidMount,componentDidUpdate, and componentWillUnmount in class components.

Controlled Components are form elements where React controls the state (e.g., in controlled inputs, value is controlled by useState). Uncontrolled Components are form elements where DOM controls the state (e.g., when you use a ref to access the value).

The key prop is used by React to identify and efficiently update elements in a list. This is fundamental in optimising re-renders and limiting unnecessary updates while keeping track of which items have changed.

In this case, the key prop is item.id because it uniquely identifies each item in the list to help React manage and update the DOM when the list changes efficiently.

A ref in React provides a means of accessing the underlying DOM element or a reference to a component directly. A ref gets utilised for focusing elements, measuring the DOM, or triggering actions. A ref skips React's state, props flow.

React’s component lifecycle work based on Mounting: componentDidMount(), Updating: componentDidUpdate() and Unmounting: componentWillUnmount()

In Hooks, useEffect() replaces lifecycle methods in functional components (handles mounting, updating, and unmounting).

To handle asynchronous errors in React, we need to use try/catch in async functions.

In useEffect(), wrap async code in try/catch for error handling.
For component errors, use Error Boundaries, but they don’t catch async errors.

React Strict Mode is a development tool that helps identify potential issues in your app by providing extra checks and warnings. It doesn’t affect production but helps improve code quality.

Hooks are functions that allow the use of React features (state, lifecycle) in functional components. Commonly used hooks include:

1. useState - for state management
2. useEffect - for side effects
3. useContext - for the context
4. useRef - for referencing DOM elements.
5. useMemo - for memoising expensive calculations. Memoising means saving (or caching) the result of a function or component so it doesn’t 

have to recalculate or re-render unnecessarily. Improving performance by avoiding repeated work.

React.memo is a higher-order component that memoises a functional component to prevent unnecessary re-renders when the props don't change.

Conditional rendering means showing different UI elements based on conditions (like if a value is true or false) in React components. In the below example, if isLoggedIn  is true, output will be “Welcome back!”. Else, “Please sign in”.

Prop drilling is when you pass data through many components only to get to a component that is deeply nested. You can avoid prop drilling by using Context API or state management tools like Redux or Zustand.

Redux is a state management library for JavaScript applications. It helps you manage state in larger applications by putting the whole application's state in one single centralised store, which is a good way to share data between components and keep the state more predictable.

Redux is a comprehensive state management library that contains lots of useful functionality (middleware, time-travel debugging, state logic complexity), while the Context API is integrated with React, built for simplicity and intended mainly to have a way to pass data down the component tree without using props. Ultimately, we will likely use Redux for larger, complex applications and Context API for lighter, global state.

Server-Side Rendering, or SSR, is when we render React components on the server and send them as HTML back to the browser. SSR starts fast by transporting mostly static HTML to load build times initially. It gives faster initial load times while also providing better SEO and improved performance on slow devices.

Render props allow a component to accept a function as a prop and call it to render some content. It allows you to share logic between components in a flexible way.

Lazy loading in React means to load components, objects at a time when it is needed, this could be on scroll, for example. It’s important because it lets users see parts of the app quickly without waiting for everything to load, making the app faster and smoother, especially when there are many components.

Flux is a pattern of managing data flow in your React application. In Redux, it follows a single-directional flow of data. This makes the state of your app predictable, and it is easier to debug.

Action-> Reducer -> Store -> UI

Pure components are components that only re-render when the props or state change. This helps improve performance by preventing unnecessary re-renders.

useEffect runs after the page is shown. useLayoutEffect runs before the page is shown. Use useLayoutEffect when you need to change the layout or measure it to make adjustments before the user sees it.

Optimise unnecessary renderings with React.memo. Use lazy loading to load your React component only when it is needed. Use Memo and useCallback to cache values and functions, respectively. Use React.lazy and Suspense for code splitting. Avoid heavy work during render.

Suspense is a React feature that allows you to show a fallback UI (a loading spinner, for example) while you load anything, like a lazy-loaded component or data. It improves user experience by handling loading states seamlessly.

If you update state directly (like this.state.value = 5), React won't detect the change and won't re-render the component. Always use setState (class) or state updater functions (hooks) to update state properly.

To test React components using React Testing Library (RTL), follow the steps below.

1. Render the component with render().
2. Select elements using queries like getByText, getByRole, etc.
3. Simulate user actions with fireEvent or userEvent.
4. Make assertions using expect().

This test checks if the button click calls the given function.