ReactJS Interview Questions and Answers

ReactJS Interview Questions and Answers

In case you’re searching for ReactJS Interview Questions and answers for Experienced or Freshers, you are at the correct place. React JS Interview Question and Answers helps all the front-end developers to prepare and clear the React interview.  React is in high demand in the market and the status of React is amazing in today’s trend. Even for clearing the React certifications, it is better for you to go through the below posted questions to get the hottest job roles, shine in the learning paths, and become sturdy in all the React JS concepts. The questions are collected by the experts which includes basic and advanced phases of React Js. The important topics covered here are ReactJS features, advantages, ReactJS framework, ReactJS Lifecycle, about Redux, Flux, versions of ReactJS, different components and many more.  On successfully learning these topics, you can easily get into the career profiles like React JS Developer, Full Stack Engineer, Front-end Developer, Web Developer etc.

There is parcel of chances from many presumed organizations on the planet. The ReactJS advertise is relied upon to develop to more than $5 billion by 2021, from just $180 million, as per ReactJS industry gauges. In this way, despite everything you have the chance to push forward in your vocation in ReactJS Development. Gangboard offers Advanced ReactJS Interview Questions and answers that assist you in splitting your ReactJS interview and procure dream vocation as ReactJS Developer.

Best ReactJS Interview Questions and Answers

Do you believe that you have the right stuff to be a section in the advancement of future ReactJS , the GangBoard is here to control you to sustain your vocation. Various fortune 1000 organizations around the world are utilizing the innovation of ReactJS to meet the necessities of their customers. ReactJS is being utilized as a part of numerous businesses. To have a great development in ReactJS work, our page furnishes you with nitty-gritty data as RPA prospective employee meeting questions and answers. ReactJS Interview Questions and answers are prepared by 10+ years experienced industry experts. ReactJS Interview Questions and answers are very useful to the Fresher or Experienced person who is looking for the new challenging job from the reputed company. Our ReactJS Questions and answers are very simple and have more examples for your better understanding. By this ReactJS Interview Questions and answers, many students are got placed in many reputed companies with high package salary. So utilize our ReactJS Interview Questions and answers to grow in your career.

Q1) What are the reflection features?

Answer:The main features of the reaction are listed below:

• It uses the virtual DOM instead of the actual DOM.
• It uses server rendering.
• This follows a single directional data flow or data binding.

Q2) List some of the main benefits reflecting.

Answer: Some of the major benefits are:

• This increases the performance of the application
• It can also be used conveniently on the server and server side
•  Due to JSX, code reading increases
• It’s easy to integrate with other structures such as meter, angle, etc.
• Using the answer, it is very easy to write UI test cases

Q3) What are the limitations of reactions?

The limitations of the reaction are listed below:

• Answer A library is not a complete framework
• Its library is very big and takes time to understand
• It is very difficult to understand new programmers
• The coding problem is the use of inline sampling and JSX

Q4) Why can not I read JSX in browsers?

Answer: In order to activate a browser to read JSX, the JSX file must first replace a JavaScript item using JSX transformers like Babel and then send it to the browser.

 Q5) “What’s yours, everything is a part.”

Answer: Components are structural blocks of UI of a React app. These components divide the entire UI into smaller independent and repetitive pieces. Then do not affect the other parts of the UI, each of which gives each other on behalf of each other.

Q6) Explain the purpose of providing reflection ().

Answer: Every efficiency must be provided. It is a single opposite element that represents the own DOM components. If more than one HTML element is supplied, they should be linked together in a fuzzy index like <form>, <group>, <div>. This function is pure, ie it will be returned to the same conclusion every time it is implemented.

Q7) What is Props?

Answer: Answers are shorthand in properties. They only say gradually, they must be pure. They will always be sent to the baby component entirely from the parents. A child can not send a knee to the parent element. This help helps in maintaining single-direction data data and is generally used to provide dynamic generated data.

Q8) What is a situation in response, and how is it used?

Answer: The states are the heart of the opposite parts. The states are a source of data and should be kept as simple as possible. Basically, the states are elements that determine elements of rendering and behavior. They change dynamically and dynamically and interactive elements unlike props. They can access viathis.state ().

Q9) What are the major issues of MVC architecture?

Answer: Some key issues in the MVC structure are:

• DOM handling is very expensive
• Applications were slow and inefficient
• There was great memory loss
• Due to circular functions, a complex model has been created around models and ideas

Q10) Explain Flux.

Answer: Flux is an architectural form, which implements a single directional guided data flow. It controls the data received and enables connections between multiple elements using the central store, which has power over all the data. Any update throughout the application will only occur here. Flux application provides stability and reduces run-time errors.

Q11) What is Redux?

Answer: Redux is one of the most libraries for the front end development in today’s market. It is also used as a predictable state container for Java applications and full utilities for state administration. Applications created with Redux can be easily tested and run in different environments that show stable behavior.

Q12) What is the response rat?

Answer: Route Rotor is a powerful routing library, which adds new screens to the application. This keeps the URL in sync with the data displayed on the web page. It maintains a standard configuration and behavior and is used to create single page web applications. Response Router is a simple API.

Q13) Why is the switch keyword used in answer to Rounder v4?

Answer: Although a <div> is used to connect multiple paths inside the router. If you want to show only one way on multiple defined routes, the ‘switch’ key is used. <Switch> When typing a typed URL in defined ways in a tag line. When you see the first match, it offers a certain way. Thus avoiding remaining paths.

 Q14) What is event handling?

Answer: Event handling system is considered to capture user information and other similar data. This is usually done by DOM components. This task is easy to achieve. This approach is considered two-way communication.

Q15) How many external elements are there in JSX output?

Answer: This should be a JSX element, so the task is easily executed. Having more than one expression is not a problem, but it will slow down the process. If you are new to this technology, there is a possibility of confusion with more than one expression.

Q16) What are uncontrolled and uncontrolled elements?

Answer: Components in ReactJS maintain their own internal state. They are basically considered uncontrolled. On the other hand, elements that do not maintain any interior are considered controlled elements in ReactJS. Controlled elements are easily controlled by many methods. The components of most parts are controlled.

Q17) Do you mention the main benefits of Fluoxes?

Answer: Applications built on the flux have components that are simply tested. By updating the shop simply, developers can test and test any discriminations. It cuts the overall risk of data fondness. All applications are superior and do not have compatibility issues.

Q18) How do the DOM and the Virtual Top Object differ from one person?

Answer: Virtual DOM can not directly affect HTML. Compared with a regular DOM, the virtual is very fast and reliable can do its job. In addition to that, the Virtual Dome has the ability to automatically run the autocomplete. Also, the ability to handle more tasks without having to face any of the virtual DOM issues.

Q19) What is the answer in the life cycle of an answer?

Answer: A reflection within the most expensive area is the lifespan of its segment – so after some time the areas are detected as a tool for creating a potential utility.

Q20) What can be done if there is more than one line of expression?

Answer: In such a situation, a multi-line JSX expression is an option. If you are a first time user, it may seem bad, but then you can easily understand everything. Avoid many taxes to do a reliable job and requires several times to get the results as expected.

Q21) Can the word “class” be used in JSX? Why or why not?

Answer: No, it is not possible in JSX. Because “class” is an interest in JavaScript (an occupied) word. However, you can use the word “className”. If you use the “Class” word, JSX will immediately be translated to JavaScript.

Q22) What do you know about the rounder?

Answer: Organizing elements is an important task in ReactJS. The router is used to determine which type of pay is not to be done. This is a dictum in many activities.

Q23) What is one of the main types of reflection?

Answer: ReactNode

Q24) What do you mean in the state?

Answer: This is essentially a JavaScript object, which should be handled effectively in transferring data. In general, it is inside of all the components used. It is considered an important part of the RectJS utilities that increase user interfaces. It specifies the time-changing data, some errors can be removed and the developers can always ensure the quality.

Q25) What is the reduction?

Answer: An application is a method of handling state (or data).

Q26) Can props be found in parenting elements?

Answer: Yes, that’s possible. The best way to do this work is by using the spread operator. It can be done to list properties but this is a complex process.

Q27) In ReactJS, why is it necessary to capitalize the elements?

Answer: Elements are not a DOM element, but they are required by the developers. If they do not invest, they can cause various problems and confuse developers with many components. At the same time, there may be a problem with integrating certain components and commands.

Q28) What do you know about artificial events?

Answer: ReactJS is capable of modifying the original events of browsers by monitoring browser behavior. This is done to ensure that events have logical properties beyond the different browsers. In fact, they operate cross browser envelope around the browser logical event system.

Q29) Doom variation?

Answer: If the components are provided twice, virtual Tom changes have been found. They are represented simply by the modified element on the side. There are many other components that are not passed through the changes. DOM tuning is considered to reduce the changes to the DOM as a result of user actions. Usually the browser is done to increase efficiency. It is due to its ability to do all the tasks quickly.

Q30) Can the JSX Elements be attached to other JSX components?

Answer: That’s possible. The process is very similar to that of nesting HTML elements. However, there are some things that are different. To do this task you need to know the source and the target components.

Q31) What are the benefits of ReactJs?

Answer:

• Application performance will increase.
• It can also be used on the client and server side.
• The JSX code is reasonable or reliable.
• The test is easy.

Q32) Why do we use ReactJs?

Answer: This is an interview with a Frequently Asked ReactJs interview questions. We will respond to the handling of the view of the mobile app.

Q33) Which company has created this response, when will the first release take place?

Answer: Facebook performance developer and first release took place in March 2013.

Q34) What is the fundamental difference between pros and cons?

Answer: Fundamental difference: State is mutable and unchanging.
Next upcoming interview questions can go

Q35) When you use the top class elements for the function element?

Answer: If your element does a state or lifetime cycle, we will use class elements.

Q36) How do we share between elements in the parsing?

Answer: Using State, Prop We share data.

Q37) When can you avoid using setState() after a component has been unmounted ?

Answer: We can use isMounted()  to avoid calling setState().

Q38) How can you bind an event handler in JSX call back?

Answer: You can use arrow functions in the callbacks.

 <button onClick={(event) => this.handleClick(event)}>
  {'Click me'}
</button>
 (Or) You can bind in constructor like below example
 class Test extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
 handleClick() {
    // …..
  }}

Q39) Why do we use ‘key’ attribute and when do you use it?

Answer: We use ‘key’ attribute when creating array of elements. React will identify which item is changed, added, removed using key attribute.
Example:

 const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
)

Q40) Can you explain about forward refs?

Answer: Forward refs will allow components to pass refs they recieve to child components.
Example:

 const ButtonElem = React.forwardRef((props, ref) => (
  <button ref={ref} className="btn-class">
    {props.children}
  </button>
));
 // Create ref to the DOM button:
const ref = React.createRef();
<ButtonElem  ref={ref}>{'Forward Ref example'}</ButtonElem>

Q41) List out use cases of HOC?

Answer: Use cases of HOC (Higher order component):

• Code reuse, logic and bootstrap abstraction.
• Render hijacking.
• State abstraction and manipulation.
• Props manipulation.

Q42) What is the use of Context in React?

Answer: Instead of passing the data through props at every level we use Context to pass directly through the component tree. For example if you want to pass authentication details at every level of the component instead of using props we can use context for passing the data.
const {Provider, Consumer} = React.createContext(defaultValue)

Q43) What is the use of this.props.children?

Answer: this.props.children will allow you to pass components as data to other components.

Q44) Why do we use super() in constructor?

Answer: We use super() because the child components cannot use this reference until we call super() method.

Q45) What is called reconciliation?

Answer: When a component’s state or props change then react will compare the rendered the element with previous rendered one and will update the actual DOM if it is required. This process is called reconciliation.

Q46) How to group list of children without adding extra nodes to the DOM?

Answer: We can use Fragments to group list of children.
Example:

 render() {
  return (
    <React.Fragment>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </React.Fragment>
  )
}

Q47) Why fragments are better than container div’s?

Answer

• Fragments use less memory and are bit faster compared to container div’s.
• It makes DOM inspector less cluttered.

Q48) List out the predefined proptypes?

Answer

• PropTypes.number
• PropTypes.string
• PropTypes.array
• PropTypes.object
• PropTypes.func
• PropTypes.node
• PropTypes.element
• PropTypes.bool
• PropTypes.symbol
• PropTypes.any

Q49) How to catch JavaScript errors anywhere in their child component tree?

Answer: We can use Error boundaries components that will catch javascript errors, logs and can also display fallback UI.

Q50) Can you write an error boundary component?

Answer:
Below is the error boundary component.

    class ErrorDisplay extends React.Component {
    constructor(props) {
    super(props)
    this.state = { isError: false }
  } componentDidCatch(error, info) {
    // log an error to error reporting service
    logErrorToMyService(error, info)
  }
 static getDerivedStateFromError(error) {
    // Display fall back UI.
     return { isError: true };
   }
  render() {
    if (this.state.isError) {
      // Render custom fallback UI.
      return <h2>{'OOPs!! Something went wrong.'}</h2>
    }
    return this.props.children
  }
}
 You can call the component as below
 <ErrorDisplay>
  <MyWidget />
</ErrorDisplay>

Q51) Can you list down some of the methods in react-dom package?

Answer:

• render()
• hydrate()
• unmountComponentAtNode()
• findDOMNode()
• createPortal()

Q52) How do you do server-side rendering in React?

Answer: We use ReactDOMServer to render components to static markup.
Example:

 import ReactDOMServer from 'react-dom/server'
import App from './App'
 ReactDOMServer.renderToString(<App />)

Q53) Can you differentiate between constructor and getInitialState?

Answer: constructor is used when you are using ES6 classes.

 Example:
 class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { /* initial state */ }
  }
}
 getInitialState is used when using React.createClass()
 const App = React.createClass({
  getInitialState() {
    return { /* initial state */ }
  }
})

Q54) How do you re-render a component without using setState()?

Answer:
You can use forceUpdate() for re-rendering a component.
component.forceUpdate(callback)

Q55) How to apply focus to an input element?

Answer:

 componentDidMount() {
    this.nameInput.focus()
  }
  render() {
    return (
      <div>
        <input
          defaultValue={‘No focus’}
        />
        <input
          ref={(input) => this.nameInput = input}
          defaultValue={Will focus'}
        />
      </div>
    )
  }

Q56) How do you set a timer to update every second?

Answer:

 componentDidMount() {
  this.timer = setInterval(() => this.setState({ time: Date.now() }), 1000)
}

Q57) How do you make an AJAX call in react?

Answer:

   class Students extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      students: [],
      error: null
    }
  }
 componentDidMount() {
    fetch('https://api.test.com/students)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            students: result.students
          })
        },
        (error) => {
          this.setState({ error })
        }
      )
  }
 render() {
    const { error, students} = this.state
    if (error) {
      return <div>Error: {error.message}</div>;
    } else {
      return (
        <ul>
          {students.map(item => (
            <li key={students.name}>
              {students.name}
            </li>
          ))}
        </ul>
      )
    }
  }
}

Q58) How to implement two way data binding in react js?

Answer:

class DataBinding extends React.Component{
 state = {
     name:"react"
 }
 handleChange = (e) =>{
   this.setState({
       name: e.target.value
   })
 }  render(){
   return(
    <div>
     <h1>{this.state.name}</h1>
     <input type="text" onChange={this.handleChange} value={this.state.name} />
    </div>
   )
  }
}

Q59) How do you display falsy values in JSX?

Answer:
Falsy values such as null, false, undefined can be printed using the below command.

 <div>
This is a text {String(myVariable)}
</div>

Q60) Explain what are synthetic events with an example?

Answer: Synthetic event is  a cross-browser wrapper around browser’s native event. The synthetic event works the same way as the event system of browsers, the only difference is that the same code will work across all browsers.
Below is the simple click event example:

 class DisplayAlert extends Component {
    displayAlert() {
    alert("hello I’m alert");
  }    render() {
    return (
      <button onClick={this.displayAlert}> Show alert </button>
    );
  }
}

Q61) How to trigger click event programmatically?

Answer:
1. Create ref in render method:
<input ref={input => this.inputElement = input} />
2. Apply click event in your event handler:
this.inputElement.click()

Q62) How to display styles based on props value?

Answer:

<div className="button-class l {this.props.visible ? 'show' : 'hidden'}"></div>

Q63) Explain strict mode in React with example.

Answer: Using React.StrictMode will highlight potential problems in application.
Example:

 return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  )

Q64) How can you pass a parameter to an event handler?

Answer:You can pass parameter to event handler as below:

 <button onClick={this.handleClick.bind(this, id)} />

Q65) Which is better callback refs or findDOMNode() ?

Answer: Callback refs is better than findDOMNode() because findDOMNode() prevents certain improvements in React.

Q66) How to convert text to uppercase on user input entered?

 handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()})
}

Q67) How do you submit a form in react?

Answer:

   class User extends React.Component {
  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.input = React.createRef()
  }
    handleSubmit(event) {
    alert('Submitted: ' + this.input.current.value)
    event.preventDefault()
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          {'Name:'}
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Q68) Give an example on how to create props proxy for HOC component.

Answer:

 function HOC(WrappedComponent) {
  return class Test extends Component {
    render() {
      const newProps = {
        title: 'New Header',
        footer: false,
        showFeatureX: false,
        showFeatureY: true
      }
      return <WrappedComponent {...this.props} {...newProps} />
    }
  }
}

Q69) How to set a dynamic key for state?

Answer:

handleChange(event) {
  this.setState({ [event.target.id]: event.target.value })
}

Q70) How to render children into a DOM node that exists outside the DOM hierarchy?

Answer: We can use Portal to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
ReactDOM.createPortal(child, container)

Q71) Can you name the pointer events in react?

Answer: Below are the pointer events available in react

• onPointerDown
• onPointerMove
• onPointerUp
• onPointerCancel
• onGotPointerCapture
• onLostPointerCaptur
• onPointerEnter
• onPointerLeave
• onPointerOver
• onPointerOut

Q72) What are the advantages of using redux?

Answer: Following are the advantages of using redux.

• Single source of truth : The state of the application is stored in an object tree within a single store. Because we use single state it is easier to debug the application.
• State is read-only: State is read-only. In order to update the state we need to emit an action and update the state. You can’t directly update the state.

Q73) How to create a store in redux?

Answer:

 import { createStore } from 'redux'
 function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}
 const store = createStore(todos, ['Use Redux'])
 store.dispatch({
  type: 'ADD_TODO',
  text: 'Read the docs'
})

Q74 )Pure Component Vs Component?

Answer: PureComponent is same as Component except that it will handle shouldComponentUpdate for us. When props or state changes  PureComponent will do shadow comparison of both state & props where as component will not compare any state or props.

Q75) How to programmatically redirect to another page using react router?

Answer:

 import { withRouter } from 'react-router-dom'
 const Button = withRouter(({ history }) => (
<button type='button'onClick={() => { history.push('/new-location') }} >
Click Me! </button> )
)

Q76) What is the use of {…this.props} ?

Answer: The three dots represent spread operator. {…this.props} spreads out the “own” properties in props as discrete properties.

Q77) How to hide a component based on state value?

Answer:

{ this.state.showComponent ? <MyComponent /> : null }

Q78) How to pass props in react router?

Answer:

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

Q79) How can you access redux store outside component?

Answer: You can access store outside the component by doing ‘export’.
store = createStore(myReducer)
export default store

Q80) Explain about shallow rendering in react testing.

Answer: Shallow rendering lets you render a component one level deep and assert facts about what its render method returns.

Q81) What are the Pr-defined keywords in react alternate to html attributes?

Answer:
class is replaced with className
for is replaced with htmlFor

Q82) How to get query parameters in react routing?

Answer:
const queryString = require(‘query-string’);
const parsed = queryString.parse(props.location.search);

Q83) How do you share code between components using render props?

Answer:

 <Data render={data => (
  <h1>{`Hello ${data.target}`}</h1>
)}/>

Q84) How do you update props in react?

Answer: You can’t update props in react because props is read-only. You can’t modify the props received from parent to child.

Q85) How do you remove an element in the react state?

Answer:

  deleteItem(index) {
  this.setState({
    data: this.state.data.filter((item, i) => i !== index)
  })
}

Q86) Name the lifecycle method that listen to state changes?

Answer:

• componentwillupdate
• componentdidupdate

Q87) What is ReactJs?

Answer: ReactJs is a JavaScript library, it is used to build user interface UI components to build single page applications.

Q88) What is JSX?

Answer: JSX is the abbreviation of JavaScripteXtension. It is the XML tag form of JavaScript to describe HTML.ReactJs can also work without JSX, but JSX makes the react more refine.

Q89) What is called Virtual DOM?

Answer: It’s the copy of real DOM. In virtual state the render method copy the original DOM as objects.

Q90) What is called Synthetic events?

Answer: It’s the wrapping of browser events. Then only the events can able to call outside of the browser like Android Applications.

Q91) What is called Props?

Answer: Props are used to get values from the components to the render functions. It can able to create with different names and can access with the same name in render functions. And it can able to assign the functionality for the components.

Q92) What is called Super Props?

Answer: Super Props can declare in constructor. It is used to get the properties of parent DOM.

Q93) What is called States in ReactJs?

Answer: It’s is just like props but dynamic. It is used to store the values of Elements and based on the changes of state lifecycle events will initiate.

Q94) What is called Destructuring?

Answer: It is the process of extraction of array of objects. After destructuring you will get the separate every single object in separate variable.

Q95) Is it possible to update the values of props?

Answer: NO, Props are immutable; we cannot able to edit the values of props in render functions.

Q96) What is called Component in ReactJs?

Answer:  Components are the reusable code and it is the combination of HTML and JavaScript. The values are of the components are stored in State.

Q97) What is called Arrow Function?

Arrow function is introduced in ECMA 6 or ES 6 Javascript. It is called as Fat Arrow Function. The difference between normal function is, it is shorter and way of binding ‘This’ components is differ.

Q98)What is called Mounting and Demounting?

Answer:

• Mounting: The process of attach the elements to the DOM
• Demounting: The process of detach the elements from the DOM.

 Q99) What is called keys in react?

Answer: Keys are using in mapping to identify the unique elements in Virtual DOM. The key value either is in string or numbers but that must be unique.

Q100) What is called refs?

Answer: Refs are an attribute of the DOM elements. One of the main uses of refs is find the DOM elements easily.

Q101) What is called render ( ) function in react?

Answer: Render ( ) function is used to create and update the DOM elements. The value rendered in render functions are immutable, it cannot editable once rendered.

Q102) What is called Stateless function?

Answer: Stateless functions are also called as Functional Components. It is an simple old JavaScript function

Q103) Write the syntax to create the state and change the value of state.

Answer:

• To create the state: this.state = {‘state name’: “ ”};
• To change the value of state: this.setState({‘state name’:”new value”})

Q104) What is called React Router?

Answer: React router is used to render the components based on route path. It will decide the component which one has to render in DOM.

Q105) What is called Event handling in react?

Answer: The process of do some functions based on the actions like click, drag, double click on the DOM elements.

Q106) What are the life cycle events in react?

Answer:

• Construction
• Updates
• Destruction

Q107) Explain ComponentWillMount().

Answer: –It is called after the DOM elements removes from DOM and it will swipe the memory to increase the access space.

Q108) What is called FLUX in react?

Answer: It is Architecture of react to maintain the unidirectional data flow between the components.

Q109) What is called Stateful component?

Answer: It is also called a class component. It will store the state and have an access to change the values of state.

Q110) What is the function using in react to list the values?

Answer: Map ( ) is using to list the components in react. It will return the each element of array in the list item.

Q111) How to create action creators react with redux?

Answer: We are creating the action creators passed the data flow for previous state to the current state in unidirectional ways.

Q112)How to dispatch the data in store?

Answer: Dispatch the data one component to another component based on the action creators that data store the parent component

Q113) What is the purpose using bindActionsCreators?

To bind the event in event handler based on the action dispatcher to the HTML element

Q114) How to set the dataflow using react with redux?

Answer: React is a unidirectional dataflow.we are passing the data parent to child component using via store

Q115) How to handle the more action redux?

Answer: If you want to create same component in more action flow we are using the same swith functionality in different modules

Q116) react with redux  archicture flow?

Answer: We are passing the data for one component to another component vi a event data passing action via reducer.That reducers passing the data in parent component using  store.

Q117) How to splitting the reducers?

Answer: We are splitting the reducres based on the event actions.That action we are splitting the separate modules.

Q118) Usage of react with redux application?

Answer:

• React with redux application we are splitting the separate data flow to one component to another component.
• Here we are using the separate structure  for the data flow
• react using for virutual DOM

 Q119) What is the benchmark in react comparing another javascript framework?

Answer:

• Comparing to the another javascript frame work here we are using the virual DOM based on the react diff algorithem
• Comparing to the another javascript framework performance wise very fast and updateing  DOM is fast

Q120) what is the diff algorithem?

Answer: Diff algorithem  react developers create the own  for the Virual DOM upadateing in the browsers.

Q121) How to render the react DOM in browser?

Answer:  Normally the browser render the DOM in TREE node.but react we are using the virutual DOM updating for the particular DOM nit read entire DOM.

Q122) what is the DOM?

Answer: Document object  model is render the html element inside the view layer.

Q123) What is REACTJS?

Answer:

•  REACTJS is a javascript library.
•  Used for building single page application
•  REACTJS focused on handling view layer for web and mobile apps.

Q124) Features of REACTJS

Answer:

• REACTJS follows unidirectional data flow.
• It supports server side rendering.
• It creates and using virtualDOM instead of RealDOM.
• creates and uses UI components that is reusable to develop the view.

Q125) State in REACTJS

Answer:

• State is a normal javascript Object
• It contains some information that may change over the lifetime of the component
• Try to make the state as simple as possible.
• when a component state is changed React will re-render the component to the browser.

Example:

class User extends Component {
constructor(props) {
super(props)
this.state = {
message: 'Hello world'
}}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
)
}
}

Q126) Props in REACTJS

Answer:

• Props stands for “properties”
• Props are data passed down from a parent component to child component.
• Props are read only.
• Props can trigger state changes.
• Single value or object can passed to component on creation using a naming
• convention similar to HTML attributes.

Example :<Element data={‘some value or objects’}

 Q127) Props vs State

Answer:

• Props and State are pure javascript objects
• Both are different in their functionality with respect to component.
• Props are passed to component similar to function parameter
• State is managed within component similar to variables declared inside a  function.

Q128) JSX in REACTJSAnswer:

Answer:

• JSX stands for Javascript XML.
• It gives javascript along with HTML like template syntax.

Example: const element = <h1>Hello, world!</h1>;

Q129) REFS in REACTJS

Answer:

• ref is reference to the element
• They should be avoided in most cases, but sometime it useful when you need to access DOM or instance of component directly.

Q130) Virtual DOM

Answer:

•  It is an Object representation of DOM object like a lightweight copy.
•  It is a node tree that lists attributes and the elements and content as objects and properties.
•  This kept in memory and synced with the “Real DOM”.
•  its step that happens between the render function being called and the displaying of element on the screen.
•  The whole process called reconciliation.

 Q131) Pure Components:

Answer:

• pureComponent is same as component.
• It handle shouldComponentUpdate() method
• When state or props changes, PureComponent compare current state and props.
• So the component will re-render by default when shouldComponentUpdate is called.

 Q132) Pass a parameter to event handler:

Answer:

• Use arrow function to wrap around an event handler and pass a parameter

Example: <button onClick={() => this.clickHandler(id)} />

•  Or use javascript bind method.

Example:  <button onClick={this.clickHandler.bind(this, id)} />

Q133) Controlled Components:

Answer: A component that controls the input elements.
Example: Every state mutation will have an associate handler function.
this.setState({value: event.target.value.toUpperCase()})

Q134) Uncontrolled Components:

Answer:

• Uncontrolled Components are store their own state internally.
• using a ref to find its current value when we need it.  It seems like traditional HTML.

Example:

this.input = React.createRef();
handleSubmit(event) {
alert('submitted value: ' + this.input.current.value)
event.preventDefault()
}
<form onSubmit={this.handleSubmit}>
<input type="text" ref={this.input} />
</form>

Q135) Lifting State Up in React:

Answer: when several component need same shared data then move or lift the shared data to nearest common ancestor.
Example: If two child component share the same data from its parent then move the state to its parent instead of maintaining local state.

 Q136) Lifecycle methods in React:

Answer:

• getDerivedStateFromProps: executing right before render() and execute on every render.  Very rarely we will use this lifecycle.
• componentDidMount: execute after every first rendering method. All Ajax requests are made here and DOM or state updates.
•  shouldComponentUpdate: by default it returns true. It checks if the component will be updated or not. If you no need to update or render the component just write return false in this lifecycle hook.
•  this is a great place to improve to prevent a re-render if component receives a  new prop.

getSnapshotBeforeUpdate:

•  execute just before rendered output is committed to the DOM.
• any value returned by this will be passed to componentDidUpdate().

componentDidUpdate:

•  is executed immediately after updating occur.
•  this will not execute if shouldComponentUpdate set to false.

the component willUnmount:

• it is used to cancel any outgoing network requests and remove all event listeners associated with the component.
• used to release memory.

 Q137) Higher-Order Components:

Answer:

• a higher-order component (HOC) is a function
•  it takes a component as arguments and returns a new component.
• it is a pure component because they can accept and dynamically provided child component but it will not modify any behavior from their input components.
• Code reuse, logic and bootstrap abstraction.
•  Props manipulation.

 Q138) What is reconciliation:

Answer:  when props are state changes in the component then react decides whether DOM update need or not. REACT compares its previous and current state if they are different then react will update the component this whole process called reconciliation.

 Q139) What is context?

Answer: pass data through a component without having pass props down manually.
Example: const {Provider, Consumer} = React.createContext(defaultValue)

 Q140) Children Prop:

Answer:

•  children is a prop
• pass components as data to other components

 Q141) purpose of using super constructor with props argument?

Answer:  a child class constructor not able to make use of “this” reference until super() called.

 Q142) className over class attribute?

Answer:

•  class is a keyword in javascript, JSX is an extension of javascript.
•  So that we not able to use class inside JSX that’s why react uses className instead of class.

 Q143) What is  Fragments:

Answer: group all the children without adding extra nodes to the DOM.

render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
)
}

 Q144) Advantages of react?

Answer:

• applications performance increases because of using virtual DOM.
• easy to read and write when we are using JSX.
• client and server side rendering is possible.
• because it is only a view library we can migrate with any other frameworks like angular , backbone.
• easy to write unit testing, eg.jest

Q145) limitations in react?

Answer:

• react is a library, not a framework.
• hard to learn for beginners who are new to web development.
• need additional configuration when integrating with MVC framework.
• code complexity will increase when using inline templating and JSX

Q146) What Is Reactjs?

Answer: React is an open-source JavaScripting language used to develop front-end UI libraries for creating reusable, interactive, and stateful UI components for the web as well as mobile applications. It is first developed by Facebook.

Q147) List some features of ReactJS?

Answer: The following are a few features of ReactJS:

• Adaptability
• Open Source
• Server-side communication
• Asynchronous Functions and Generators
• Usefulness of JSX
• Flux Library
• Decorators from ES7
• Destructuring assignments.

Q148) What is JSX?

Answer: JSX is an extension to JavaScript syntax which generates “React elements”. The JavaScript expression syntax that we integrate into JSX must be wrapped in curly braces. After compilation, only the JSX expressions turn into regular JavaScript objects.

Q149) What are the major features of React?

Answer: The following are the major features of React:

• It makes use of VirtualDOM instead of RealDOM
• Supports server-side programming.
• Follows — Unidirectional data flow.
• To develop a view, it uses reusable UI components.

Q150) How to create components in React?

Answer: There are two methods to create a component. They are as follows:

• Function Components
• Class Components

Function Components: This is the easiest method to create a component. These are pure JavaScript functions which accept the props object as their first parameters and returns React elements. The following is an example for creating “Function Components”

Function wishes({ message }) {
  return <h1>{`hi, ${message}`}</h1>?
}

 {
  render() {
    return <h1>{`Hi, ${this.props.message}`}</h1>
  }
}

Q152) What Are The Advantages Of Reactjs?

Answer: The following are some advantages of using ReactJS:

• Component and data pattern improves readability.
• React uses a virtual DOM which is a JavaScript object to improve apps performance.
• ReactJS can be used with other frameworks.
• It can be used on both server and client-side.

Q153) What is Redux?

Answer: The idea behind Redux is that the whole application state is kept in a single store called javascript object. The only method to change the state is by writing the reducers for the action that modifies the state.

Q154) What is Virtual DOM (VDOM)?

Answer: The VDOM is an in-memory presentation of Real DOM. The presentation of UI is stored in the memory and is synced with the “Real” DOM. It’s a step that takes place between displaying elements on the screen and before calling the render function.

Q155) What is the main goal of React Fiber?

Answer: The main goal of React Fiber is to grow its suitability into many areas such as gestures, animation, and layout. Its most important feature is “incremental rendering” i.e. ability to split the existing work into segments and spread to several frames.

Q156) What is the key difference between cloneElement and createElement?

Answer: JSX specific term or element of the source code is transformed into another language by using React.createElement() function. Whereas cloneElement is used to mimic a particular element and pass new props to it.

Q157) How to write comments in React?

Answer: The comments in React are quite similar to that of JavaScript comments but, in React or JSX the comments are wrapped up in curly braces “{ }”. The following is the sample code for comments.
Single-line comments:

<div>
  {/* Single-line comments */}
  </div>
Multi-line comments:
<div>
  {/* Multi-line comments for more than
   one line */}
  </div>

Q158) Why React chooses className over class attribute?

Answer: The main reason is that  “class” is a keyword and “JSX” is an extension of JavaScript. Hence React uses ClassName in place of class to pass a string as the className property. The following is the sample code:

render() {
  return <span className={'menu navigation-menu'}>{'Menu'}</span>
}

Q159) What is reconciliation?

Answer: When a component’s state changes, the React decides whether to update the DOM or not. This process is done by comparing the existing element with a newly added element. When they are not equal, React will inform the DOM. This process is known as reconciliation.

Q160) Give An Example Of Using Events?

Answer: The following is an example for creating events:

import React from 'react';
import ReactDOM from 'react-dom';
 var StepCounter = React.createClass({
                    getInitialState: function() { return {counter: this.props.initialCounter }; },
                    handleClick: function() {      
                    this.setState({counter: this.state.counter + 1});  },
                    render: function() {
                    return <div onClick={this.handleClick}> OnClick Event, Click Here: {this.state.counter }</div>;
            }
});
 ReactDOM.render(< StepCounter initialCounter={7}/>, document.getElementById('content'));

Q161) What are the Features of Workflow in Redux?

Answer: The following are the important features of Redux workflow:

• Commit
• Revert
• Sweep
• Reset

Commit: It makes the current state the initial state.
Revert: Rolls back to the previous state.
Sweep: All activities that you may commit by mistake will be disabled.
Reset: Allow to reset the state of the store.

Q162) Why it is a must to capitalize component names?

Answer: It is essential to use capital letters because to distinguish components and constructors from DOM elements. Whereas in JSX, smaller case letter tag names referrers to HTML elements.

Q163) How to set the state in ReactJS using the dynamic key name?

Answer: If you are using either Babel transpiler or the ES6 to transform the JSX code then you can finish the transform with computed property names. The following example will help you understand how to set state using a dynamic key name:

 handleInputChange(event) {
  this.setState({ [event.target.id]: event.target.value })
}

Q164) What are Higher Order Components?

Answer: Basically, HOC is a function that accepts an old component and returns a new component. It is a pattern derived from React’s compositional nature.
const EnhancedComponent = higherOrderComponent(WrappedComponent)

Q165) Real Disadvantages of utilizing React?

Answer: The following are the disadvantages of using ReactJS:

• It utilizes JSX and inline templating in coding.
• It is the outer covering for the ‘View’ layer in MVC architecture.
• Its library is vast and sets aside the opportunity to get it.
• React is only a JavaScript library, not a system.