Check out the first part of the series here -> https://amay.hashnode.dev/reactjs-interview-questions-set-1

Middleware

Middleware helps you with logging, error reporting, making asynchronous requests, and a whole lot more. It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.
Read More

Class-based vs Functional Components

Lazy Loading

In essence, lazy loading means that a component or a part of code must get loaded when it is required. It is also referred to as code splitting and data fetching. Talking about React specifically, it bundles the complete code and deploys all of it at the same time. Read More

Need of useState()

In the below code if one tries to increment the counter by clicking on the button the count will not change because the react rendered the component only once and since there is no state change it won't get re-rendered, the count will remain at 0 on-screen. By console.log one can see that the count is incrementing on click.

import React from "react";

export default function MyComponent() {
  let count = 0;
  const setCount = () => {
  count++;
  console.log(count);
   }
  return (
    <div>
      <label>{count}</label>
      <hr/>
      <label>Counter</label>
      <button onClick = {setCount}>{count}</button>
    </div>
  );
}

In the below code if one tries to increment the counter by clicking on the button the count will change because the react rendered the component once when it got mounted and since there is state change it will get re-rendered, the count will get incremented on-screen.

import React, { useState } from "react";

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

return (
    <div>
      <label>{count}</label>
      <hr/>
      <label>Counter</label>
      <button onClick = {() => {
        setCount(count + 1);
      }}>{count}</button>
    </div>
  );
}

Read More

What is Flux?

Handling data inside a client-side application is a complex task. Today we're looking at a one method of handling complex data proposed by Facebook called the Flux Architecture. As our applications get bigger and more complex, we'll need a better data handling approach. With more data, we'll have more to keep track of.

Our code is required to handle more data and application state with new features. From asynchronous server responses to locally-generated, unsynchronized data, we have to not only keep track of this data, but also tie it to the view in a sane way. Recognizing this need for data management, the Facebook team released a pattern for dealing with data called Flux.

Flux is a pattern for managing how data flows through a React application. As we've seen, the preferred method of working with React components is through passing data from one parent component to it's children components. The Flux pattern makes this model the default method for handling data.

There are three distinct roles for dealing with data in the flux methodology:

• Dispatcher
• Stores
• Views (our components)

The major idea behind Flux is that there is a single-source of truth (the stores) and they can only be updated by triggering actions. The actions are responsible for calling the dispatcher, which the stores can subscribe for changes and update their own data accordingly.

When a dispatch has been triggered, and the store updates, it will emit a change event which the views can rerender accordingly. This may seem unnecessarily complex, but the structure makes it incredibly easy to reason about where our data is coming from, what causes it's changes, how it changes, and lets us track specific user flows, etc.

The key idea behind Flux is: Data flows in one direction and kept entirely in the stores.
Read More

This ends the second part of the ReactJS crux series. Make sure to follow me on Twitter🐦 for more updates!