1. Why are inline ref callbacks or functions not recommended?

    If the ref callback is defined as an inline function, it will get called twice during updates, first with null and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one.

    class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }


  render () {
   return (
     <form onSubmit={this.handleSubmit}>
       <input
         type='text'
         ref={(input) => this.input = input} /> // Access DOM input in handle submit
       <button type='submit'>Submit</button>
     </form>
   )
 }
}

    But our expectation is for the ref callback to get called once, when the component mounts. One quick fix is to use the ES7 class property syntax to define the function

    class UserForm extends Component {
 handleSubmit = () => {
   console.log("Input Value is: ", this.input.value)
 }

 setSearchInput = (input) => {
   this.input = input
 }

 render () {
   return (
     <form onSubmit={this.handleSubmit}>
       <input
         type='text'
         ref={this.setSearchInput} /> // Access DOM input in handle submit
       <button type='submit'>Submit</button>
     </form>
   )
 }
}

**Note:** In React v16.3,

  1. What is render hijacking in react?

    The concept of render hijacking is the ability to control what a component will output from another component. It actually means that you decorate your component by wrapping it into a Higher-Order component. By wrapping you can inject additional props or make other changes, which can cause changing logic of rendering. It does not actually enables hijacking, but by using HOC you make your component behave in different way.

  2. What are HOC factory implementations?

    There are two main ways of implementing HOCs in React.

    1. Props Proxy (PP) and
    2. Inheritance Inversion (II).

    But they follow different approaches for manipulating the WrappedComponent.

    Props Proxy

    In this approach, the render method of the HOC returns a React Element of the type of the WrappedComponent. We also pass through the props that the HOC receives, hence the name Props Proxy.

    
function ppHOC(WrappedComponent) {
 return class PP extends React.Component {
   render() {
     return <WrappedComponent {...this.props}/>
   }
 }
}

    Inheritance Inversion

    In this approach, the returned HOC class (Enhancer) extends the WrappedComponent. It is called Inheritance Inversion because instead of the WrappedComponent extending some Enhancer class, it is passively extended by the Enhancer. In this way the relationship between them seems inverse.

    function iiHOC(WrappedComponent) {
 return class Enhancer extends WrappedComponent {
   render() {
     return super.render()
   }
 }
}

  3. How to pass numbers to React component?

    You should be passing the numbers via curly braces({}) where as strings in quotes

       React.render(<User age={30} department={"IT"} />, document.getElementById('container'));

  4. Do I need to keep all my state into Redux? Should I ever use react internal state?

    It is up to developer decision. i.e, It is developer job to determine what kinds of state make up your application, and where each piece of state should live. Some users prefer to keep every single piece of data in Redux, to maintain a fully serializable and controlled version of their application at all times. Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component's internal state.

    Below are the thumb rules to determine what kind of data should be put into Redux

    1. Do other parts of the application care about this data?

    2. Do you need to be able to create further derived data based on this original data?

    3. Is the same data being used to drive multiple components?

    4. Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?

    5. Do you want to cache the data (i.e, use what's in state if it's already there instead of re-requesting it)?

  5. What is the purpose of registerServiceWorker in React?

    React creates a service worker for you without any configuration by default. The service worker is a web API that helps you cache your assets and other files so that when the user is offline or on slow network, he/she can still see results on the screen, as such, it helps you build a better user experience, that's what you should know about service worker's for now. It's all about adding offline capabilities to your site.

       import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import registerServiceWorker from './registerServiceWorker';

   ReactDOM.render(<App />, document.getElementById('root'));
   registerServiceWorker();

  6. What is React memo function?

    Class components can be restricted from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.

    const MyComponent = React.memo(function MyComponent(props) {
 /* only rerenders if props change */
});

  7. What is React lazy function?

    The React.lazy function lets you render an dynamic import as a regular component. It will automatically load the bundle containing the OtherComponent when the component gets rendered. This must return a Promise which resolves to a module with a default export containing a React component.

    const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
 return (
   <div>
     <OtherComponent />
   </div>
 );
}

    Note: React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we still recommend React Loadable.

  8. How to prevent unnecessary updates using setState?

    You can compare current value of the state with an existing state value and decide whether to rerender the page or not. If the values are same then you need to return null to stop re-rendering otherwise return the latest state value.

    For example, the user profile information is conditionally rendered as follows,

    getUserProfile = user => {
  const latestAddress = user.address;
  this.setState(state => {
    if (state.address === latestAddress) {
      return null;
    } else {
      return { title: latestAddress };
    }
  });
};

  9. How do you render Array, Strings and Numbers in React 16 Version?

    Arrays: Unlike older releases, you don't need to make sure render method return a single element in React16. You are able to return multiple sibling elements without a wrapping element by returning an array.

    For example, let us take the below list of developers,

    const ReactJSDevs = () => {
  return [
    <li key="1">John</li>,
    <li key="2">Jackie</li>,
    <li key="3">Jordan</li>
  ];
}

    You can also merge this array of items in another array component.

    const JSDevs = () => {
  return (
    <ul>
      <li>Brad</li>
      <li>Brodge</li>
      <ReactJSDevs/>
      <li>Brandon</li>
    </ul>
  );
}

    Strings and Numbers: You can also return string and number type from the render method.

    render() {
 return 'Welcome to ReactJS questions';
}
// Number
render() {
 return 2018;
}