What is the purpose of renderToNodeStream method?

The ReactDOMServer#renderToNodeStream method is used to generate HTML on the server and send the markup down on the initial request for faster page loads. It also helps search engines to crawl your pages easily for SEO purposes. Note: Remember this method is not available in the browser but only server.

What is MobX?

MobX is a simple, scalable and battle tested state management solution for applying functional reactive programming (TFRP). For reactJs application, you need to install below packages,

npm install mobx --save
npm install mobx-react --save

What are the differences between Redux and MobX?

Below are the main differences between Redux and MobX,

| Topic | Redux | MobX | | ----- | ------- | ------- | Definition| It is a javascript library for managing the application state | It is a library for reactively managing the state of your applications | | Programming | It is mainly written in ES6 | It is written in JavaScript(ES5) | | Data Store | There is only one large store exist for data storage | There is more than one store for storage | | Usage | Mainly used for large and complex applications | Used for simple applications | | Performance | Need to be improved | Provides better performance | | How it stores | Uses JS Object to store | Uses observable to store the data |

Should I learn ES6 before learning ReactJS?

No, you don’t have to learn es2015/es6 to learn react. But you may find many resources or React ecosystem uses ES6 extensively. Let's see some of the frequently used ES6 features,

1. Destructuring: To get props and use them in a component

   // in es 5
    var someData = this.props.someData
    var dispatch = this.props.dispatch
   
   // in es6
   const { someData, dispatch } = this.props
   

2. Spread operator: Helps in passing props down into a component

   // in es 5
   <SomeComponent someData={this.props.someData} dispatch={this.props.dispatch} />
   
   // in es6
   <SomeComponent {...this.props} />
   

3. Arrow functions: Makes compact syntax

   // es 5
   var users = usersList.map(function (user) {
    return <li>{user.name}</li>
   })
   // es 6
   const users = usersList.map(user => <li>{user.name}</li>);
   

What is Concurrent Rendering?

The Concurrent rendering makes React apps to be more responsive by rendering component trees without blocking the main UI thread. It allows React to interrupt a long-running render to handle a high-priority event. i.e, When you enabled concurrent Mode, React will keep an eye on other tasks that need to be done, and if there's something with a higher priority it will pause what it is currently rendering and let the other task finish first. You can enable this in two ways,

// 1. Part of an app by wrapping with ConcurrentMode
<React.unstable_ConcurrentMode>
  <Something />
</React.unstable_ConcurrentMode>

// 2. Whole app using createRoot
ReactDOM.unstable_createRoot(domNode).render(<App />);

What is the difference between async mode and concurrent mode?

Both refers the same thing. Previously concurrent Mode being referred to as "Async Mode" by React team. The name has been changed to highlight React’s ability to perform work on different priority levels. So it avoids the confusion from other approaches to Async Rendering.

Can I use javascript urls in react16.9?

Yes, you can use javascript: URLs but it will log a warning in the console. Because URLs starting with javascript: are dangerous by including unsanitized output in a tag like <a href> and create a security hole.

const companyProfile = {
  website: "javascript: alert('Your website is hacked')",
};
// It will log a warning
<a href={companyProfile.website}>More details</a>

Remember that the future versions will throw an error for javascript URLs.

What is the purpose of eslint plugin for hooks?

The ESLint plugin enforces rules of Hooks to avoid bugs. It assumes that any function starting with ”use” and a capital letter right after it is a Hook. In particular, the rule enforces that,

1. Calls to Hooks are either inside a PascalCase function (assumed to be a component) or another useSomething function (assumed to be a custom Hook).

2. Hooks are called in the same order on every render.

What is the difference between Imperative and Declarative in React?

Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue.

The imperative way of doing this would be:

if( user.likes() ) {
    if( hasBlue() ) {
        removeBlue();
        addGrey();
    } else {
        removeGrey();
        addBlue();
    }
}

Basically, you have to check what is currently on the screen and handle all the changes necessary to redraw it with the current state, including undoing the changes from the previous state. You can imagine how complex this could be in a real-world scenario.

In contrast, the declarative approach would be:

if( this.state.liked ) {
    return <blueLike />;
} else {
    return <greyLike />;
}

Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a sepecific state, and is therefore much simpler to understand.

What are the benefits of using typescript with reactjs?

Below are some of the benefits of using typescript with Reactjs,

1. It is possible to use latest JavaScript features

2. Use of interfaces for complex type definitions

3. IDEs such as VS Code was made for TypeScript

4. Avoid bugs with the ease of readability and Validation