DEV Community: Harish G

Popular React Interview Questions, one needs to know. (Part 1)

Harish G — Wed, 28 Dec 2022 01:41:02 +0000

1. What is a Directional data flow in react?
2. Difference between props and state in React
3. What is lifting state in react? Understand with example
4. What are Controlled and Uncontrolled componenents?
5. How the virtual DOM works in React?

1. What is a Directional data flow in react?

In React, a "directional data flow" typically refers to the way that data and information is passed through the components of a React application.

In a typical React application, data is passed from a parent component to a child component through props, which are properties that are passed to a component when it is rendered. This is known as "unidirectional data flow," because data flows in a single direction, from the parent to the child.

This unidirectional data flow helps to keep the application predictable and easy to understand, as it allows you to reason about the flow of data through the application. It also makes it easier to debug and maintain the application, as you can trace the flow of data through the components and understand how it is being used.

In some cases, you may also need to pass data from a child component back up to a parent component, or between two sibling components that are at the same level in the component hierarchy. This can be done using techniques such as callback functions or the React context API.

Here is an example of a directional data flow in a functional React component:

Imagine that you have a functional component called ChildComponent that displays a message and a form with a text input field. The message is passed to the component as a prop, and the form captures the value of the text input field when it is submitted:

import { useState } from 'react'

function ChildComponent(props) {
  const [inputValue, setInputValue] = useState('')

  const handleSubmit = (event) => {
    event.preventDefault()
    props.onFormSubmit(inputValue)
  }

  return (
    <div>
      <div>{props.message}</div>
      <form onSubmit={handleSubmit}>
        <label>
          Enter some text:
          <input type="text" value={inputValue} onChange={(event) => setInputValue(event.target.value)} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  )
}

The parent component, ParentComponent, can then pass the message prop and the onFormSubmit callback function to the ChildComponent when it is rendered:

import React from 'react'
import { ChildComponent } from './ChildComponent'

function ParentComponent() {
  const handleFormSubmit = (value) => {
    // do something with the value in the parent component
  }

  return (
    <ChildComponent message="Hello from the parent component!" onFormSubmit={handleFormSubmit} />
  )
}

In the above example, the data flows from the ParentComponent to the ChildComponent, through the message prop and the onFormSubmit callback function. The ChildComponent also sends data back to the parent component through the onFormSubmit callback function, which allows the parent component to respond to a user action in the child component.

2. Difference between props and state in React

In React, props and state are both used to store and manage data within a component. However, they serve different purposes and have some key differences:

Props: Props (short for "properties") are values that are passed to a component from its parent component. Props are read-only and cannot be modified by the component that receives them. They are used to pass data down the component tree, and are commonly used to customize the behavior or appearance of a component.

State: State is an object that is used to store and manage data within a component that can change over time. Unlike props, state is mutable and can be modified by the component itself. State is used to store and manage data that is specific to a component and may change as a result of user interactions or other events.

In general, props should be used for values that are fixed or that do not change, such as configuration options or data that is passed down from a parent component. State should be used for values that may change within a component, such as the current value of a form field or the status of a toggle button.

It is important to note that components should not modify their own props, and should only use props to render their content. Any changes to the component's state or props should be made through the component's parent, which can pass the updated values down to the child component via props. This helps to maintain the unidirectional flow of data in a React application, and makes it easier to reason about and debug the component tree.

3. What is lifting state in react? Understand with example

In React, "lifting state" refers to the process of moving state that is shared between multiple components up the component tree to a common ancestor component. This allows the state to be shared and managed more efficiently, and helps to avoid redundant props or prop drilling (passing props down through multiple levels of components).

Here is an example of lifting state in React:

Imagine you have a component called ProductList that displays a list of products. Each product has a name, a price, and a "favorite" status that indicates whether the user has added it to their favorite list.

import React from 'react';

function ProductList(props) {
  const { products } = props;

  return (
    <ul>
      {products.map(product => (
        <Product
          key={product.id}
          name={product.name}
          price={product.price}
          favorite={product.favorite}
        />
      ))}
    </ul>
  );
}

The Product component displays a single product and has a button that allows the user to toggle the product's favorite status:

import React, { useState } from 'react';

function Product(props) {
  const { name, price, favorite } = props;
  const [isFavorite, setIsFavorite] = useState(favorite);

  const handleToggleFavorite = () => {
    setIsFavorite(!isFavorite);
  };

  return (
    <li>
      <p>{name}</p>
      <p>{price}</p>
      <button onClick={handleToggleFavorite}>
        {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
      </button>
    </li>
  );
}

In this example, the favorite prop is passed down to the Product component from the ProductList component. However, if the user clicks the button to toggle the favorite status, the isFavorite state in the Product component changes. This means that the favorite prop is no longer in sync with the isFavorite state, and the component tree becomes out of sync.

To fix this, we can lift the favorite state up to the ProductList component and pass it down as a prop. The Product component can then use the favorite prop to render the button and update the prop when the button is clicked.

import React, { useState } from 'react';

function ProductList(props) {
  const { products } = props;
  const [favorites, setFavorites] = useState(new Set());

  const handleToggleFavorite = id => {
    if (favorites.has(id)) {
      favorites.delete(id);
    } else {
      favorites.add(id);
    }
    setFavorites(new Set(favorites));
  };

  return (
    <ul>
      {products.map(product => (
        <Product
          key={product.id}
          name={product.name}
          price={product.price}
          favorite={favorites.has(product.id)}
          onToggleFavorite={handleToggleFavorite}
        />
      ))}
    </ul>
  );

}

I hope this answers the question.

4. What are Controlled and Uncontrolled componenents?

In React, a controlled component is a form element whose value is controlled by the React state. This means that the value of the form element is determined by the state, and the state is updated when the value of the form element changes.

An uncontrolled component, on the other hand, is a form element whose value is not controlled by the React state. This means that the value of the form element is determined by the element's internal state, and the React state is updated when the form element's value changes.

Here is an example of a controlled input component in React:

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = event => {
    setValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
  );
}

In this example, the value of the input element is determined by the value state, and the state is updated when the user types into the input element.

Here is an example of an uncontrolled input component in React:

import React from 'react';

function UncontrolledInput() {
  const handleSubmit = event => {
    event.preventDefault();
    console.log(event.target.elements.input.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="input" />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, the value of the input element is determined by the element's internal state, and the value is accessed when the form is submitted.

Controlled components are generally considered to be more predictable and easier to debug than uncontrolled components, as the state is managed by React and the component is always in sync with the state. Uncontrolled components can be useful in cases where the form element's value does not need to be tracked by the React state, or when it is not possible to use a controlled component (such as with a third-party library).

## 5. How the virtual DOM works in React?

The virtual DOM (Virtual Document Object Model) is an abstract representation of a DOM tree in memory. It is a lightweight and efficient way to update the actual DOM in a React application, and is used to minimize the number of DOM manipulations required when a component's state changes.

Here is an overview of how the virtual DOM works in React:

When a component's state changes, React creates a new virtual DOM tree that represents the updated UI.

React then compares the new virtual DOM tree to the previous virtual DOM tree, and calculates the minimum number of DOM manipulations required to update the actual DOM to match the new virtual DOM tree.

React updates the actual DOM with the minimum number of DOM manipulations required. This can include adding, deleting, or modifying DOM elements.

The updated DOM is then rendered in the browser, displaying the updated UI to the user.

Using the virtual DOM to update the actual DOM allows React to optimize performance by minimizing the number of DOM manipulations required. This is especially important in large applications with complex UI, where frequent updates to the DOM can be slow and expensive.

It is important to note that the virtual DOM is not a physical representation of the DOM, but rather an abstract representation that is used to calculate the minimum number of DOM manipulations required to update the actual DOM. The virtual DOM is not directly visible to the user, and is only used internally by React to update the actual DOM.

Here is an example of how the virtual DOM works in React, using the following component:

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

When the component is first rendered, React creates a virtual DOM tree that represents the initial UI:

{
  type: 'div',
  children: [
    {
      type: 'p',
      children: 'Count: 0'
    },
    {
      type: 'button',
      children: 'Increment'
    }
  ]
}

When the user clicks the "Increment" button, the count state is updated and a new virtual DOM tree is created:

{
  type: 'div',
  children: [
    {
      type: 'p',
      children: 'Count: 1'
    },
    {
      type: 'button',
      children: 'Increment'
    }
  ]
}

Sending data to an API in a React application

Harish G — Mon, 19 Dec 2022 21:28:40 +0000

There are several ways to send data to an API in a React application. Some common options include:

fetch(): The fetch() function is a built-in JavaScript function for making HTTP requests. It can be used to send data to an API in a React application by making a POST request with the fetch() function and providing the data as the request body.
Axios: Axios is a popular JavaScript library for making HTTP requests. It can be used to send data to an API in a React application by using the post() method provided by Axios and providing the data as the request body.

Other options include:

HTTP libraries: There are various HTTP libraries available for JavaScript that can be used to send data to an API in a React application, such as request, superagent, and node-fetch. These libraries provide a variety of features and options for making HTTP requests, and can be used to send data to an API by making a POST request with the appropriate library function and providing the data as the request body.
React hooks: React hooks, such as useEffect() and useState(), can be used to send data to an API in a React application. For example, you can use the useEffect() hook to make an HTTP request to an API when a component mounts or updates, and use the useState() hook to store the response data and update the component's state.
Higher-order components: Higher-order components (HOCs) are a way to reuse code in React by wrapping a component with additional functionality. You can create an HOC that makes an HTTP request to an API and passes the response data as props to the wrapped component, allowing the component to send data to the API and receive a response.

Here's an example of how you might use fetch() to send data to an API in a React component:

import React, { useState } from 'react';

function MyComponent() {
  const [data, setData] = useState({});

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);

    fetch('http://example.com/api/endpoint', {
      method: 'POST',
      body: formData
    })
      .then((response) => response.json())
      .then((result) => {
        setData(result);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="field1" />
      <input type="text" name="field2" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyComponent;

In this example, the handleSubmit() function is called when the form is submitted. It prevents the default action (which would refresh the page), and then uses fetch() to send a POST request to the API endpoint with the form data as the request body. The response from the API is parsed as JSON and used to update the component's state using the setData() function.

To send data to an API in a React application using Axios, you can use the post() method provided by Axios. Here's an example of how you might use it in a React component:

import React, { useState } from 'react';
import axios from 'axios';

function MyComponent() {
  const [data, setData] = useState({});

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);

    axios.post('http://example.com/api/endpoint', formData)
      .then((response) => {
        setData(response.data);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="field1" />
      <input type="text" name="field2" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyComponent;

In this example, the handleSubmit() function is called when the form is submitted. It prevents the default action (which would refresh the page), and then uses Axios to send a POST request to the API endpoint with the form data as the request body. The response from the API is used to update the component's state using the setData() function.

Axios and fetch() are both popular options for making HTTP requests in JavaScript, and both have their own advantages and disadvantages. Here are some potential advantages of using Axios over fetch():

Automatic transformation of data: Axios can automatically transform JSON data in the request and response, while fetch() requires you to manually parse the response data as JSON.
Better error handling: Axios provides a more comprehensive error handling system, allowing you to catch specific HTTP status codes and errors. fetch() only rejects the promise if the server returns a non-2xx status code, making it harder to handle specific errors.
Ability to cancel requests: Axios allows you to cancel pending requests using the CancelToken feature. This can be useful if you need to cancel a request because it is no longer relevant or if the user navigates away from the page.
More comprehensive API: Axios provides a wider range of functions for making different types of HTTP requests (e.g., post(), get(), put(), etc.), as well as functions for configuring the behavior of requests (e.g., timeout). fetch() only provides a single function for making requests and does not offer as many configuration options.
Support for older browsers: Axios has better support for older browsers than fetch(), which is not supported in some older browsers.

Axios has its own set of disadvantages. Some potential disadvantages of using Axios include:

Larger size: Axios is larger than some other options for making HTTP requests, such as fetch(), which may be a concern if you are trying to minimize the size of your codebase.
Dependency on a third-party library: Axios is a third-party library that you need to install and maintain in your project. This can be an additional burden if you are already using multiple libraries, and it also means that you are dependent on the maintenance and updates of the library.
Asynchronous nature: Axios is asynchronous, which means that it uses promises and callbacks to handle the response from the server. This can be more complex than using a synchronous library, especially for developers who are new to asynchronous programming.
Lack of support for some features: Axios does not support some features that are available in other HTTP libraries, such as the AbortController API for canceling requests.

The choice of the right tool depends on the project requirements and preferences. By knowing the pros and cons one can make an informed choice.

Testing in React 17: setup and resources

Harish G — Tue, 22 Nov 2022 13:02:16 +0000

A number of times we end up coding in legacy projects, we may face peer dependency errors. I faced one such issues while I started unit testing in a partially developed React project with React v17. Here I share my set up working in legacy environment. I also share some of the popular resources for testing in React.

Setting up testing in React Project with React 17
Create-react-app project comes with jest runner for running tests, but we need to install react-testing-library (RTL)

npm config set legacy-peer-deps true (because we use legacy packages)
npm install (or npm update)
npm i -D @testing-library/react@release-12.x (the latest RTL v13 has no support for React 18)

Resources
https://www.robinwieruch.de/react-testing-library/
https://www.robinwieruch.de/react-testing-jest/

Documentation and recipes
https://testing-library.com/docs/react-testing-library/intro/
https://jestjs.io/docs/tutorial-react

Good practices of -react testing
https://kentcdodds.com/blog/common-mistakes-with-react-testing-library

Some of the example tests
https://github.com/nareshbhatia/react-testing-techniques
https://javascript.plainenglish.io/testing-material-ui-forms-with-react-testing-library-50a9d4d300f2
https://github.com/kentcdodds/testing-react-apps

Tutorial on testing
Bruno Antunes https://youtu.be/41ox41v62jU