How to use class field declarations syntax in React classes?

React Class Components can be made much more concise using the class field declarations. You can initialize local state without using the constructor and declare class methods by using arrow functions without the extra need to bind them.

Let's take a counter example to demonstrate class field declarations for state without using constructor and methods without binding,

class Counter extends Component {
  state = { value: 0 };

  handleIncrement = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  handleDecrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };

  render() {
    return (
      <div>
        {this.state.value}

        <button onClick={this.handleIncrement}>+</button>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    )
  }
}

What are hooks?

Hooks is a new feature(React 16.8) that lets you use state and other React features without writing a class.

Let's see an example of useState hook example,

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

What are the rules needs to follow for hooks?

You need to follow two rules in order to use hooks,

1. Call Hooks only at the top level of your react functions. i.e, You shouldn’t call Hooks inside loops, conditions, or nested functions. This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple useState and useEffect calls.

2. Call Hooks from React Functions only. i.e, You shouldn’t call Hooks from regular JavaScript functions.

How to ensure hooks followed the rules in your project?

React team released an ESLint plugin called eslint-plugin-react-hooks that enforces these two rules. You can add this plugin to your project using the below command,

npm install eslint-plugin-react-hooks@next

And apply the below config in your ESLint config file,

// Your ESLint configuration
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"
  }
}

Note: This plugin is intended to use in Create React App by default.

What are the differences between Flux and Redux?

Below are the major differences between Flux and Redux

| Flux | Redux | | ----- | ------- | | State is mutable | State is immutable | | The Store contains both state and change logic | The Store and change logic are separate | | There are multiple stores exist | There is only one store exist | | All the stores are disconnected and flat | Single store with hierarchical reducers| | It has a singleton dispatcher | There is no concept of dispatcher | | React components subscribe to the store | Container components uses connect function|

What are the benefits of React Router V4?

Below are the main benefits of React Router V4 module,

1. In React Router v4(version 4), the API is completely about components. A router can be visualized as a single component(<BrowserRouter>) which wraps specific child router components(<Route>).

2. You don't need to manually set history. The router module will take care history by wrapping routes with <BrowserRouter> component.

3. The application size is reduced by adding only the specific router module(Web, core, or native)

Can you describe about componentDidCatch lifecycle method signature?

The componentDidCatch lifecycle method is invoked after an error has been thrown by a descendant component. The method receives two parameters,

1. error: - The error object which was thrown
2. info: - An object with a componentStack key contains the information about which component threw the error.

The method structure would be as follows

componentDidCatch(error, info)

In which scenarios error boundaries do not catch errors?

Below are the cases in which error boundaries doesn't work,

1. Inside Event handlers

2. Asynchronous code using setTimeout or requestAnimationFrame callbacks

3. During Server side rendering

4. When errors thrown in the error boundary code itself

Why do you not need error boundaries for event handlers?

Error boundaries do not catch errors inside event handlers.

React doesn’t need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle methods, the event handlers don’t happen during rendering. So if they throw, React still knows what to display on the screen.

If you need to catch an error inside an event handler, use the regular JavaScript try / catch statement:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    try {
      // Do something that could throw
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

Note that the above example is demonstrating regular JavaScript behavior and doesn’t use error boundaries.

What is the difference between try catch block and error boundaries?

Try catch block works with imperative code whereas error boundaries are meant for declarative code to render on the screen.

For example, the try catch block used for below imperative code

try {
  showButton();
} catch (error) {
  // ...
}

Whereas error boundaries wrap declarative code as below,

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

So if an error occurs in a componentDidUpdate method caused by a setState somewhere deep in the tree, it will still correctly propagate to the closest error boundary.