My Frontend Developer learning route - React 16.8 (in progress)

1. Why do we choose to use React?

• It allows server-side rendering.

Server-side rendering (SSR) is an applications ability to convert HTML files on the server into a fully rendered HTML page for the client.

Pros

1. A server-side rendered application enables pages to load faster, improving the user experience.

2. search engines can easily index and crawl content because the content can be rendered before the page is loaded, which is ideal for SEO

3. Rendering server-side helps efficiently load webpages for users with slow internet connection or outdated devices.

Cons

1. Rendering static HTML from server-side is efficient, but for complex applications with frequent server requests and full page reloads can increase load times due to the bottleneck of the server performance. It can be very costly and pressuring the server.

2. Server-side rendering may not be compatible with third-party JavaScript code

• It uses the virtual DOM instead of the real DOM.

React use batch update mechanism to update the real DOM. Hence, leading to increased performance. This means that updates to the real DOM are sent in batches, instead of sending updates for every single change in state as Frequent DOM manipulations are expensive and performance heavy.

React virtual DOM is updated with the state changes. The previous and current version of virtual DOM is compared through an efficient diff algorithm.

• It follows uni-directional data flow or data binding.

Uni-directional data flow gives you the control over how data flows throughout your app. The data flows in a single direction from parent to child making it much more predictablef for tracing and debugging

• It is component based and extensive.

Component based provides React with better code maintenance and growth as each component in React has their own internal logic, which is easy to manipulate.

2. React Synthetic Events

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browsers native event.
As above described, Synthetic events are able to call the native event's methods such as event.preventDefault() and event.stopPropagation.

Synthetic events are delegated to document instead of the real DOM node. Therefore native events are triggered first and the events bubble up to doucment, afther which the synthetic events are triggerd.

• It provides better cross-browser compatibility as it provides a uniform api and consistent behavior on top level.

• It provides better performance as for the native broswer events, the browser will create a new event object for the listener and bind it to the node. If we have multiple listener, multiple objects will be created and require a lot of resources from the memory.
  However, the synthetic events objects are pooled and managed together. SyntheticEvent object will be reused and all properties will be nullified after the event handler has been called.

To stop the native broswer event from bubbling, we should use event.preventDefault()

3. Why should we use hooks and what are the hooks in Reat?