React Interview Questions

What is a Component in React?
What is the Component Life Cycle in React?
What is JSX? What is the difference between JSX and JavaScript (JS)?
What are the features of ES5 and ES6?
- What are Arrow Functions in JavaScript?
- What is Destructuring Assignment in JavaScript?
What is the difference between State and Props of a Component?
What is the right way to set the State of a Component?
How to change the state of a component?
How to embed one component in another?
What is a Promise in JavaScript?
What are Async & Await in JavaScript?
What is an Arrow Function?
What are some commonly used NPM commands and the purpose of package.json?
How to interact with REST endpoints in React? Which library would you use?
What is Redux and how is it used for state management in React?

1. What is a Component in React?

Component: A component is the basic building block of a React application. It is a JavaScript function or class that returns a piece of JSX to be rendered to the UI. Components can be either stateful or stateless and are reusable.
Functional Components: Simple components that only accept props and return JSX.
Class Components: Components that extend React.Component and have access to lifecycle methods, internal state, and other features.

2. What is the Component Lifecycle in React?

Lifecycle: The lifecycle of a React component is divided into different phases: Mounting, Updating, and Unmounting.
- Mounting: The phase when the component is being created and inserted into the DOM. Lifecycle methods include constructor(), getDerivedStateFromProps(), render(), componentDidMount().
- Updating: Occurs when a component’s state or props change. Lifecycle methods include getDerivedStateFromProps(), shouldComponentUpdate(), render(), and componentDidUpdate().
- Unmounting: The phase when a component is being removed from the DOM. The lifecycle method here is componentWillUnmount().

3. What is JSX? Difference between JSX and JS?

JSX (JavaScript XML): A syntax extension for JavaScript that allows you to write HTML structures in the same file as JavaScript code. JSX is later compiled into regular JavaScript by React.
- Example:
```
  const element = <h1>Hello, world!</h1>;
```
JSX vs. JS:
- JSX is a syntactic sugar for writing HTML-like code directly within JavaScript.
- In standard JavaScript, you'd have to use React.createElement to render elements, whereas JSX simplifies the syntax and improves readability.

4. What are ES5, ES6 Features? Arrow Functions, Destructuring Assignments?

ES5: Introduced basic features like Array.prototype.forEach, Object.create, JSON, and more.
ES6: Introduced major new features including:
- Arrow Functions: Shorter syntax for writing functions. They also do not have their own this.
```
  const add = (a, b) => a + b;
```
- Destructuring Assignment: A syntax for extracting values from arrays or objects.
```
  const { name, age } = user;
  const [first, second] = [1, 2];
```

5. What is the Difference between State and Props of a Component?

Props:
- Passed to a component from its parent.
- Immutable inside the component.
- Used for component configuration and communication.
State:
- A local data storage for a component.
- Can be modified within the component (mutable).
- Represents the component’s internal state or behavior.

6. What is the Right Way to Set the State of a Component?

The right way to set the state is by using the setState() method in class components, or the useState hook in functional components.
- Class Component:
```
  this.setState({ count: this.state.count + 1 });
```
- Functional Component (using useState):
```
  const [count, setCount] = useState(0);
  setCount(count + 1);
```

7. How to Change the State of a Component?

Use the setState() method (for class components) or the useState hook (for functional components) to update the state.
- Class Component:
```
  this.setState({ key: value });
```
- Functional Component (with useState):
```
  const [state, setState] = useState(initialValue);
  setState(newState);
```

8. How to Embed One Component in Another?

Components can be embedded within other components by including them in JSX. For example:

  function ParentComponent() {
    return (
      <div>
        <ChildComponent />
      </div>
    );
  }

9. What is a Promise?

A Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value.
- A Promise has three states: Pending, Resolved (Fulfilled), and Rejected.
- Example:
```
  const promise = new Promise((resolve, reject) => {
    // Asynchronous operation
    resolve('Success');
  });
```

10. What are Async & Await?

Async/Await: Syntax for handling asynchronous operations in a more synchronous manner. async functions return a promise, and await is used to pause the execution of an async function until the promise resolves.
- Example:
```
  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  }
```

11. What is an Arrow Function?

Arrow Functions: A shorter syntax for writing functions in JavaScript. They do not have their own this context and are often used in React for event handlers and callbacks.
- Example:
```
  const add = (x, y) => x + y;
```

12. NPM Commands, package.json?

NPM Commands:
- npm init: Initializes a new Node.js project and creates a package.json file.
- npm install <package>: Installs a package.
- npm start: Starts the project (usually starts a development server).
- npm run <script>: Runs a custom script defined in package.json.
- npm update: Updates installed packages.
- npm uninstall <package>: Uninstalls a package.

package.json: A file that holds metadata about the project and its dependencies, scripts, and configurations.

Example:

  {
    "name": "my-app",
    "version": "1.0.0",
    "scripts": {
      "start": "react-scripts start"
    },
    "dependencies": {
      "react": "^17.0.0",
      "react-dom": "^17.0.0"
    }
  }

13. How to Interact with REST Endpoints, Which Library You are Using?

You can use fetch (native) or libraries like Axios to interact with REST endpoints.

Axios Example:

  import axios from 'axios';
  axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

14. What is Redux – State Management?

Redux is a state management library for JavaScript apps, often used with React. It helps manage global state in an application in a predictable way by following the principles of unidirectional data flow.
- State is stored in a single object called the store.
- Actions are dispatched to modify the state.
- Reducers are pure functions that specify how the state changes in response to an action.
- Example:
```
  const initialState = { count: 0 };

  function reducer(state = initialState, action) {
    switch(action.type) {
      case 'INCREMENT':
        return { count: state.count + 1 };
      default:
        return state;
    }
  }
```