React Interview Questions - Junior Level

Lets Begin,

1> What are refs used for ?

Ans. Refs allow you to get direct access to a DOM element or an instance of a Component.

2> What happens when you call setState ?

Ans. The first thing React will do when setState is merge with object you passed into setState into the current state of the component. This will kick of a process called reconciliation.
The most efficient way possible, update the UI based on this new state.

3> When rendering a list what is a key and what is its purpose ?

Ans. Key helps React identify which items have changed, are added or are removed.
Keys should be given to the elements inside the array to give the elements a stable identity.

4> What happens during the lifecycle of a React component ?

Ans. At the highest level, React components have lifecycle events that fall into three general categories.

1. Initialization
2. State/Property Updates
3. Destruction

Initialization :
getInitialState()
getDefaultProps()

ComponentWillMount()
render()
componentDidMount()

Update:
componentWillReceiveProps()
shouldComponentUpdate()

componentWillUpdate()
render()
componentDidUpdate()

Destruction:
componentWillUnmount()

5> How do you prevent the default behavior in an event callback in React ?

Ans. You call e.preventDefault(); on the event e passed into the callback.

6> What does it mean for a component to be mounted in React ?

Ans. It has a corresponding element created in the DOM and is connected to that.

7> How do you prevent a component from Rendering in Reacr ?

Ans. Return null from the render method.

8> What's the difference between a controlled component and an Uncontrolled one in React ?

Ans. This relates to stateful DOM components(form elements) and the React docs explain the difference:

A Controlled component is one the takes its current value through props and notifies the changes through callback like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. you can call this as a "dumb component".

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

9> What is Flux ?

Ans. Unidirectional application flow paradigm/idea.

10> What is Reconciliation ?

Ans. Reconciliation is the process of comparing the DOM Tree before and after element changes and updating them accordingly.