Interview Questions

What is React?

React is a JavaScript library for building SPA (Single Page Application).

It is component-based and uses a virtual DOM to improve performance.

• Virtual DOM : diffing algorithm to update the actual DOM, which improves performance.
• Component-based Reusable UI : React is component-based, which means you can create reusable UI components.

Virtual DOM

Virtual DOM is a copy of the real DOM, used to improve the performance. It use diffing algorithm to update the actual DOM. ReactDom.render() converts the virtual DOM to the real DOM.

When the state of the component changes, the virtual DOM is updated, and the real DOM is updated only with the changed elements, which improves performance.

diffing algorithm : Start at the two roots, if the roots are different, remove the old tree and add the new tree. If the roots are the same, compare the children of the roots.

React Hooks

What are hooks in React?

Hooks allow function components to have access to state and lifecycle features. In most cases, hooks are used to replace class components.

commonly used hooks are:

• useState : to manage state in functional components
• useEffect : to perform side effects in functional component/ like fetching data from an API
• useCallback : to memoize functions
• useMemo : to memoize values
• useContext : to access context in functional components
• useReducer : to manage state in functional components

difference between useCallback and useMemo?

useCallback is used to memoize functions, while useMemo is used to memoize values.

Keys in React

Keys are used to identify the unique elements in a list. Only use keys in the list of elements. (pick a unique identifier for each element)

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => (
  <li key={number.toString()}>{number}</li>
));

controlled and uncontrolled components

Controlled components : the value of the input element is controlled by React. When a user enters data inside the input element of a controlled component, onChange function gets triggered and inside the code, we check whether the value entered is valid or invalid. If the value is valid, we change the state and re-render the input element with the new value.

Uncontrolled components : the value of the input element is handled by the DOM itself. Basically, react does not perform any action when there are changes made to the input element.

How parent and child components communicate in React? (props and callback functions)

Parent and child components can communicate using props. The parent component can pass data to the child component using props. The child component can communicate with the parent component using callback functions.

Props and State

Prop drilling

Prop drilling is the process of passing props from a parent component to a deeply nested child component. It is not recommended to pass props through multiple levels of components. Instead, you can use context or Redux to manage the state.

Higher Order Components

Higher Order Components are functions that take a component and return a new component. It is used to share common functionality between components. Talking about the code reusability, HOC is a good choice.

Custom Hooks

Custom hooks are JavaScript functions that can be used to share logic between components. It is a good way to reuse stateful logic between components.

how to create and use custom hooks?

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      setLoading(false);
    }
    fetchData();
  }, [url]);

  return { data, loading };
}
export default useFetch;

how to implement infinite scrolling in React?

Infinite scrolling can be implemented using the useEffect hook. When the user scrolls to the bottom of the page, a new set of data is fetched from the server and appended to the existing data.

csrf

What is CSRF? How to prevent CSRF attacks in React?

CSRF (Cross-Site Request Forgery) is an attack that tricks the authenticated user into executing unwanted actions on a website.

To prevent CSRF attacks in React, you can use the csrf token. The token is generated on the server and sent to the client. The client sends the token with every request, and the server verifies the token before processing the request.

For backend, security eable csrf filter in spring security. configure CorsFilter to restrict the origin.