React

Question 1

What is reconciliation?

Answer 1

Reconciliation is the process through which React updates the DOM. When a component’s state changes, React has to calculate if it is necessary to update the DOM. It does this by creating a virtual DOM tree and comparing it with the current DOM tree.

Question 2

Why do you need to write ‘className’ instead of ‘class’, and ‘htmlFor’ instead of ‘for’ when referring to html attributed in JSX?

Answer 2

Since JSX isn’t a standard language and gets transpiled to JavaScript it can’t use reserved words in JavaScript like class and for

Question 3

What is babel and what is it used for?

Answer 3

It is used to transpile ES2015 and JSX into ES5 and Javascript, because browsers don’t support ES2015 out the box and JSX isn’t a standard language, and is designed to be changed to JavaScript anyway (e.g <div></div> in JSX === React.createElement(“div”))

Question 4

What is an Element in React?

Answer 4

Is is a special type of object that is to represent a node in the DOM tree, created by using React components. The way that React components are changed into elements and made into a virtual DOM tree is known as reconciliation

Question 5

When do you use a stateful component instead of a stateless component?

Answer 5

If you need to re render a component then store a value in state, as a component re renders when state changes.
Only store values in state when you intent to access these values in the render method

Question 6

What’s the difference between client side rendering and server side rendering?

Answer 6

• Client side rendering is when a server returns an empty html file with a js bundle that runs when loaded on the client side
• Server side rendering is when you render the application on the server and serve the application content to the client directly

Question 7

Why would you need SSR? (2)

Answer 7

• If you want SEO

* If you want to reduce the effect of havint a large bundle size (i.e improve perceived performance)

Question 8

What is a Higher order Component in React?

Answer 8

Functions that take a component and return an enhanced component. This can be used to abstract logic away from components, allowing components to be more dumb and testable, and containing logic and, for example, data fetching in HoC’s. <div><img></img></div>

Question 9

Why do SVGs work so well with React?

Answer 9

In terms of returning jsx from a function, React doesn’t care if it’s a <div> or an , and SVGs are defined in a very declarative way, so you can harness the declaritive nature of React to create SVGs in a Component and using props to change SVG properties dynamically.</div>