1. What is the stable release for hooks support?

    React includes a stable implementation of React Hooks in 16.8 release for below packages

    1. React DOM

    2. React DOM Server

    3. React Test Renderer

    4. React Shallow Renderer

  2. Why do we use array destructuring (square brackets notation) in useState?

    When we declare a state variable with useState, it returns a pair — an array with two items. The first item is the current value, and the second is a function that updates the value. Using [0] and [1] to access them is a bit confusing because they have a specific meaning. This is why we use array destructuring instead.

    For example, the array index access would look as follows:

     var userStateVariable = useState('userProfile'); // Returns an array pair
 var user = userStateVariable[0]; // Access first item
 var setUser = userStateVariable[1]; // Access second item

    Whereas with array destructuring the variables can be accessed as follows:

    const [user, setUser] = useState('userProfile');

  3. What are the sources used for introducing hooks?

    Hooks got the ideas from several different sources. Below are some of them,

    1. Previous experiments with functional APIs in the react-future repository

    2. Community experiments with render prop APIs such as Reactions Component

    3. State variables and state cells in DisplayScript.

    4. Subscriptions in Rx.

    5. Reducer components in ReasonReact.

  4. How do you access imperative API of web components?

    Web Components often expose an imperative API to implement its functions. You will need to use a ref to interact with the DOM node directly if you want to access imperative API of a web component. But if you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.

  5. What is formik?

    Formik is a small react form library that helps you with the three major problems,

    1. Getting values in and out of form state

    2. Validation and error messages

    3. Handling form submission

  6. What are typical middleware choices for handling asynchronous calls in Redux?

    Some of the popular middleware choices for handling asynchronous calls in Redux eco system are Redux Thunk, Redux Promise, Redux Saga.

  7. Do browsers understand JSX code?

    No, browsers can't understand JSX code. You need a transpiler to convert your JSX to regular Javascript that browsers can understand. The most widely used transpiler right now is Babel.

  8. Describe about data flow in react?

    React implements one-way reactive data flow using props which reduce boilerplate and is easier to understand than traditional two-way data binding.

  9. What is react scripts?

    The react-scripts package is a set of scripts from the create-react-app starter pack which helps you kick off projects without configuring. The react-scripts start command sets up the development environment and starts a server, as well as hot module reloading.

  10. What are the features of create react app?

    Below are the list of some of the features provided by create react app.

    1. React, JSX, ES6, Typescript and Flow syntax support.

    2. Autoprefixed CSS

    3. CSS Reset/Normalize

    4. A live development server

    5. A fast interactive unit test runner with built-in support for coverage reporting

    6. A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps

    7. An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.