Engineering, Design, Marketing, and More

React interview questions

The most popular questions

Use our complementary questions and answers to filter and hire the best. Questions crowdsourced by our clients, answers by Punch. We provide these complementary questions to help our clients more quickly create tests for potential hires at their organizations.

Get a question answered
Punch offers four divisions of services: design, engineering, staffing, and demand

Interview questions for your next interview

Question
What happens when you call setState?
Answer
When the setState is called, first of all, it merges the object passed to it into current state of the component. This kicks off a process called reconciliation. The purpose of the process is to update the UI based on this new state. To achieve this, React constructs a new tree of React elements (that can be thought of as the object representation of UI) Once it has this tree, in order to figure out how the UI should change in response to the new state, React takes diff of new tree against the previous element tree. By doing this, React then knows the exact changes which occurred, and by knowing exactly what changes occurred, ables to minimize its footprint on the UI by only making updates where absolutely necessary.
Question
What’s the difference between an Element and a Component in React?
Answer
A React element describes what you want to see on the screen. More precisely, a React element is an object representation of some UI.

A React component is a function or a class which optionally accepts input and returns a React element (typically via JSX which gets transpiled to a createElement invocation).

Find developers today

Hire a Punch engineer

Punch offers four divisions of services: design, engineering, staffing, and demand. Our four divisions form the core of our People Forward Approach.

Contact us
Find developers today
Question
What is the difference between Class Component over a Functional Component?
Answer
If the component has state or a lifecycle method(s), a Class component is used. Otherwise, Functional component is used.
Question
What are refs in React and why are they important?
Answer
Refs are an escape hatch which allow you to get direct access to a DOM element or an instance of a component. In order to use them you add a ref attribute to your component whose value is a callback function which will receive the underlying DOM element or the mounted instance of the component as its first argument.class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}
Question
What are keys in React and why are they important?
Answer
Keys are what help React keep track of what items have changed, been added, or been removed from a list.render () {
return (

    {this.state.todoItems.map(({task, uid}) => {
    return
  • {task}

  • })}

)
}
It’s important that each key be unique among siblings. These keys play a vital role in checking whether the elements are newly inserted, in the process of reconciliation. Keys make this process more efficient, but without keys, React can’t know which local state corresponds to which item on move.
Question
What is the difference between a controlled component and an uncontrolled component?
Answer
A controlled component is a component where React is in control and is the single source of truth for the form data. Data does not live in the DOM but instead lives in our component state.

An uncontrolled component is where your form data is handled by the DOM, instead of inside your React component.
Question
Describe how events are handled in React.
Answer
In order to solve cross browser compatibility issues, event handlers in React are passed instances of SyntheticEvent, which is React’s cross-browser wrapper around the browser’s native event. These synthetic events have the same interface as native events except they work identically across all browsers.

What’s mildly interesting is that React doesn’t actually attach events to the child nodes themselves. React listens to all events at the top level using a single event listener. This is good for performance and it also means that React doesn’t need to worry about keeping track of event listeners when updating the DOM.

Ask a question

Ask a question, and one of our engineers will answer it.

We keep our questions nice and simple to be useful for everyone, and we may not answer or publish every question.

Your number is stored privately and never shared.
By submitting a question, you agree to our terms.
Request sent. Thank you!
Send another one