Reconciliation

Reconciliation is a key concept in React JS. It refers to the process through which React updates the DOM (Document Object Model) in the most efficient way when a component's state changes, leading to a new render. Because directly manipulating the actual DOM is slow and resource-heavy, React uses a 'virtual DOM' to handle these changes more efficiently.

The Reconciliation process steps are:

1. When setState() is called, React creates a new tree of component instances, which translates into a new 'virtual DOM' tree.

2. React then compares this new tree with the old one.

3. Through a 'diffing' algorithm, React calculates the minimal set of changes to convert the old tree into the new tree.

4. Finally, React applies these calculated changes to the actual DOM.

Here's a very simple example:

```jsx
class App extends React.Component {
constructor(props) {
super(props);
this.state = { name: "John" };
}

render() {
return <h1>Hello, {this.state.name}</h1>;
}

componentDidMount() {
setTimeout(() => {
this.setState({ name: "Doe" }); // triggers reconciliation
}, 1000);
}
}

React.render(<App />, document.getElementById("root"));
```

In the example above, when the App component mounts, it triggers a timeout that after 1 second changes the state of `name` to "Doe". This state change results in a new render tree where the `h1` element's children are different (from "Hello, John" to "Hello, Doe"). React's Reconciliation process will efficiently find this difference and change just the text node in the actual DOM from "John" to "Doe", rather than recreating the entire `h1` element.