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.

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).

If the component has state or a lifecycle method(s), a Class component is used. Otherwise, Functional component is used.

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>
)
}
}

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.

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.

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.