React-Conceptual-Questions

  1. What is react?

    React is a JavaScript library created by Facebook (now Meta). It is used to create a User Interface(UI). In React we can create complex UI by creating and combining many small components.

  2. Differentiate between functional and class components. What do you prefer to use and in which situation?

    Functional Component: It’s just a function that accepts props and returns a React component. It uses react hooks to manipulate data. There are many react hooks. Like, useState(), useEffect(), etc.

    Class Component: We use ES6 class syntax to write component. We need to extend React.Component to create a component. We have to use life-cycle methods to manipulate the data in the class component, according to the phase of the component.

    Both versions are equivalent and will give you the exact same output.

    I like to use Functional Component. Initially, the Functional Component did not have the capabilities as much as the Class Component. Like update state and other life cycle methods. But after the v16.8 update of React, we can also do all those things in the Functional Component using hooks.

    I prefer the Functional Component because it is simpler to write, less complex than the Class Component, and has all the functionality of the Class Component.

  3. What are States and Props in React?

    The State is data maintained inside a component. It is owned by that specific component. The component itself will update the state using the setState function or useState hook.

    The Props is data passed in from a parent component. props are read only in the child component that receives them. We need to pass callback functions, which can be executed inside the child to update props.

  4. What is the difference between State and Props? How do you decide what is controlled by the state and what is controlled by the pros?

    The difference is all about which component owns the data. State is owned locally and updated by the component itself. Props are owned by a parent component and are read-only.

    If data is shared with other components then we should use props else we should use state.

  5. What is Virtual DOM and how it works?

    The virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM. Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties.

    Updation of DOM in React is 3 step process:-

    1. Whenever anything may have changed, The entire virtual DOM gets re-rendered.
    2. The difference between the Virtual DOM representation and a Virtual DOM snapshot that was taken right before the update will be calculated.
    3. The real DOM will be updated with what has actually changed.

  6. What is the importance of the Key in the map?

    The Keys help React identify which items have been changed added, or removed. Elements inside the array must be keyed to give a static identity to the elements. Most of the time we use an object’s id as a key. If id is not available then only we use the array index. But we should try not to use an index as a key.

  7. What are the life-cycle methods in react?

    Each component in React has a lifecycle consisting of three main phases. The three phases are: Mounting, Updating, and Unmounting.

    • Mounting phase Lifecycle methods:

      1. constructor()
      2. getDerivedStateFromProps()
      3. render()
      4. componentDidMount()

    • Updating phase Lifecycle methods

      1. getDerivedStateFromProps()
      2. shouldComponentUpdate()
      3. render()
      4. getSnapshotBeforeUpdate()
      5. componentDidUpdate()

    • Unmounting phase Lifecycle methods

      1. componentWillUnmount()

  8. Which life-cycle method will you use when calling an API?

    If the API call is not dependent upon state or props data then we will use componentDidMount().

    componentDidUpdate() is used when an API call is dependent on state or props data.

  9. How do we access the parent component in a child and vice versa? (in react)

    We can access the parent component’s data in a child component using props. The data that parent data is passing via props will be available in the child component.

    We have to use the callback function to access the child component’s data in the parent component.

  10. Have you used Context?

    In a React application, data is passed top-down (parent to child) via props, but it becomes tedious when many components require data within an application. Context provides a way to share values like these between components without having to pass a prop through every level of the tree explicitly. Context is primarily used when some data needs to be accessible by many components at different nesting levels.

    Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, etc.

    The benefit of using Context:

    • We can avoid passing props through intermediate elements.
    • Code becomes simple.

  11. How to connect react with the backend?

    We need to set proxy to the backend URL in the package.json file. Like: "proxy": "http://localhost:8080". And then we can make API Calls to this URL to perform any operations on the backend.

  12. Why use Redux in React?

    When multiple components require the same data, we need to lift the state up until we find the common ancestor. We know that in React, data can only flow in one direction (top-down). Therefore, we will also need to create multiple callbacks to update the data. This will cause two problems. First, data will also be available to the intermediate components, even if the data is not required by them. Second, the code becomes too complex. Therefore we use Redux.

    Redux is a state management library. Redux helps manage the global state of an application by creating a global store. From this store, any component can access the store’s data and update the data.

  13. Explain how to work with redux.

    The way Redux works is simple. There is a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another. There are three building parts: actions, store, and reducers.

    Redux allows us to store a state in a Redux Store and uses actions to call reducers, which in turn manipulate a state.

  14. What is the container pattern?

    In Redux there are two types of Components.

    1. Container components :

      • components that are aware of Redux.
      • Are concerned with how things work.
      • Provide the data and behavior to presentational or other container components.

    2. Presentational components :

      • components that are not aware of Redux.
      • Are concerned with how things look.
      • Receive data and callbacks exclusively via props.

    Benefits of This Approach

    • Better reusability: We can use the same presentational component in many places.
    • Better understandability: We can understand our app and UI better by writing components this way.

  15. What is the middleware used for?

    Middleware generally refers to software services that “glue together” separate features in existing software. For Redux, middleware provides a third-party extension point between dispatching an action and handing the action off to the reducer.

    [ Action ] <-> [ Middleware ] <-> [ Dispatcher ]

    It can listen for all dispatches and execute code with the details of the actions and the current states. Middleware provides a powerful abstraction.

    We can use Middleware for API requests, logging in between, etc. Redux Thunk Middleware is one of the examples that is widely used with redux.