React JS Interview Questions and Answers

1. What is React JS?

• ReactJS, commonly referred to as React, is an open-source JavaScript library for building user interfaces (UIs) or user interface components
• Single-page applications where UI updates are frequent.
• It is maintained by Facebook and a community of individual developers and companies.

2. Mention few Features of React JS.

• Component-Based Architecture: React applications are structured as components, which are reusable, self-contained modules
• Virtual DOM: React uses a virtual DOM (Document Object Model) to efficiently update and render UI elements.
• Declarative Syntax: React utilizes a declarative approach, where developers describe the desired state of the UI, and React takes care of updating the DOM to match that state.
• JSX (JavaScript XML): JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within JavaScript files.

3. What is JSX?

• JSX, or JavaScript XML, is a syntax extension for JavaScript often used with React for building user interfaces.
• JSX allows developers to write HTML-like code within JavaScript, making it easier to express UI components in a more readable and declarative manner.
• JSX is a syntax extension that combines the power of JavaScript with XML-like syntax.

4. What is Element in React JS?

• An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components.
• Elements can contain other Elements in their props. Creating a React element is cheap.
• Once an element is created, it cannot be mutated.

5. What is Component in React JS?

• In React JS, a component is a reusable and self-contained piece of UI that encapsulates a specific functionality or a visual element.
• Components allow developers to modularize the user interface, making it easier to manage and maintain complex applications.

6. How to Create a Component?

• Class Component: Using ES6 class syntax to define a component. Extending the React.Component class and implementing a render method.
• Function Component: Using a simple function to define a component. Suitable for simpler components that don't need state or lifecycle methods.

7. Write an Example of Class Component.

8. Write an Example of Function Component.

9. What is Sate in React JS?

• In React JS, state is a built-in object that represents the internal data of a component.
• It allows a component to keep track of changing information and triggers re-rendering when the state is updated.
• State is a crucial concept for building dynamic and interactive user interfaces in React.

10. Characteristic of State in React JS?

• Mutable Data
• Component-Specific
• Initialization
• Updating State
• Re-rendering

11. Why should we not update the state directly?

• If you try to update the state directly then it won’t re-render the component.
• Instead use setState() method. It schedules an update to a component’s state object.
• When state changes, the component responds by rerendering.

12. What is the purpose of callback function as an argument of setState()?

• The callback function is invoked when setState finished and the component gets rendered.
• Since setState() is asynchronous the callback function is used for any post action.
• It is recommended to use lifecycle method rather than this callback function.

13. What is Props in React JS?

• Props are inputs to components.
• They are single values or objects containing a set of values that are passed to components on creation similar to HTML-tag attributes.
• The data is passed down from a parent component to a child component.

14. What is the difference between state and props?

• state is managed by the component itself and can be updated using the setState() function.
• Unlike props, state can be modified by the component and is used to manage the internal state of the component.
• Changes in the state trigger a re-render of the component and its children.

15. Why should we not update the state directly?

• If you try to update the state directly then it won't re-render the component.
• Instead use setState() method. It schedules an update to a component's state object. When state changes, the component responds by re-rendering.

16. What is the difference between HTML and React event handling?

• In HTML, the event name usually represents in lowercase as a convention.
• Whereas in React it follows camelCase convention
• In HTML, you can return false to prevent default behavior.
• Whereas in React you must call preventDefault() explicitly.

17. How to bind methods or event handlers in JSX callbacks?

• In JSX, when you want to pass a method or event handler as a callback, you need to be mindful of how you bind the method to the component instance.
• This is necessary to ensure that this inside the method refers to the correct instance of the component.

18. What are the different ways to achieve binding in JSX?

• Binding in the Constructor: common approach is to bind the method in the constructor of the component.
• Arrow Functions: Another approach is to use arrow functions in the JSX directly. Arrow functions automatically capture the this value from the surrounding scope.

19. What are the different phases of component lifecycle?

• Mounting: The component is ready to mount in the browser DOM.
• Updating: In this phase, the component gets updated in two ways, sending the new props and updating the state either from setState() or forceUpdate().
• Unmounting: In this last phase, the component is not needed and gets unmounted from the browser DOM.

20. Methods involved in Component lifecycle.

• Mounting: This phase covers initialization from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods.
• Updating: This phase covers shouldComponentUpdate(), render() and componentDidUpdate() lifecycle methods.
• Unmounting: This phase includes componentWillUnmount() lifecycle method.

21. Why fragments are better than container divs?

• Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.
• Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationships, and adding divs in the middle makes it hard to keep the desired layout.

22. What are stateless components?

• If the behaviour of a component is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components.
• But unless you need to use a lifecycle hook in your components, you should go for function components.

23. What are stateful components?

• If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component.
• These stateful components are either function components with hooks or class components.

24. What is the purpose of render method of react-dom?

• This method is used to render a React element into the DOM in the supplied container and return a reference to the component.
• If the React element was previously rendered into container, it will perform an update on it and only mutate the DOM as necessary to reflect the latest changes.

25. How to use styles in React?

• The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.
• This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.

26. How events are different in React?

• React event handlers are named using camelCase, rather than lowercase.
• With JSX you pass a function as the event handler, rather than a string.

27. What will happen if you use setState() in constructor?

• When you use setState(), then apart from assigning to the object state React also re-renders the component and all its children.
• You would get error like this: Can only update a mounted or mounting component.
• So we need to use this.state to initialize variables inside constructor.

28. How do you conditionally render components?

• In some cases you want to render different components depending on some state.
• JSX does not render false or undefined, so you can use conditional short-circuiting to render a given part of your component only if a certain condition is true.

• Java Full Stack Development Course(Online Batch & Offline Batch)
• Python Full Stack Development Course (Online Batch & Offline Batch)
• React JS Course (Online Batch & Offline Batch)

29. What is Hooks in React JS?

• In React, hooks are functions that allow you to use state and other React features in functional components.
• They were introduced in React version 16.8 to enable functional components to manage state and lifecycle features previously available only in class components.

30. What are the types of Hooks in React JS?

• useState: Allows functional components to manage local state.
• useEffect: Enables performing side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.
• useContext: Allows accessing the value of a React context within a functional component.
• useReducer: Provides an alternative to useState for managing more complex state logic.

31. What is React Router?

• React Router is a powerful routing library built on top of React that helps you add new screens.
• Flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page.

32. What is Redux?

• Redux is a predictable state container for JavaScript apps based on the Flux design pattern.
• Redux can be used together with React, or with any other view library. It is tiny (about 2kB) and has no dependencies.

33. What are the core principles of Redux?

• Single source of truth: The state of your whole application is stored in an object tree within a single store.
• State is read-only: The only way to change the state is to emit an action, an object describing what happened.
• Changes are made with pure functions: To specify how the state tree is transformed by actions, you write reducers.

34. Can I dispatch an action in reducer?

• Dispatching an action within a reducer is an anti-pattern.
• Your reducer should be without side effects, simply digesting the action payload and returning a new state object.
• Adding listeners and dispatching actions within the reducer can lead to chained actions and other side effects.

35. How to access Redux store outside a component?

• You just need to export the store from the module where it created with createStore().
• Also, it shouldn't pollute the global window object.
• store = createStore(myReducer);
• export default store;

36. Explain the useState hook in React.

• The useState hook in React is a function that allows functional components to manage and update their local state.
• It is part of React's Hooks API introduced in React 16.8. With useState, developers can add stateful logic to functional components, eliminating the need for class components.

37. Write the syntax of useState.

• const [state, setState] = useState(initialState);
• state: This variable holds the current state value.
• setState: This function is used to update the state, triggering a re-render of the component.
• initialState: The initial value of the state.

38. How does the useEffect hook work, and when might you use it?

• The useEffect hook in React provides a way to perform side effects in functional components.
• Side effects include operations such as data fetching, subscriptions, manual DOM manipulations, or any action that occurs outside the normal component rendering process.

39. Describe the differences between the useState and useReducer hooks.

useState:

useState is suitable for managing simple, independent pieces of state within a component.

You can use useState multiple times to manage different state variables independently.

The syntax is straightforward, involving the declaration of a state variable and a corresponding updater function.

useReducer:

useReducer is preferable when dealing with more complex state logic, especially when state transitions depend on the previous state.

It's beneficial for scenarios where different pieces of state are interdependent or when state transitions involve complex logic.

Instead of individual updater functions, useReducer uses a dispatch function, which takes an action to describe how the state should be updated.

40. What is the purpose of the useMemo and useCallback hooks, and when would you use them?

• The useMemo and useCallback hooks in React are performance optimization tools designed to memoize values and functions.
• to prevent unnecessary re-computations and re-renders.