MEHUL MOHAN

On the other hand, if you try to draw the border in vanilla JavaScript, you have to specify four coordinates, and then draw the line manually using code.

In a functional component, the state is never mutated, instead in a new render, the hooks return different (and updated) values. In class based components however, React itself mutates the this keyword to update the props and state according to the correct behaviour.

But as your code grows, there’s a necessity of managing state in a more organized way, avoid prop drilling and make things cleaner, especially when there has to be an information exchange among different components at different levels of nesting.

Let’s see some common ways we’ll learn in this chapter to communicate between the components:
Props (parent to child data flow)
Refs (Calling child methods from a parent)
Context API
Redux (Centralized state) (in later chapters)

Redux is the go-to choice for intermediate to advanced applications because of its unidirectional data flow (careful!

Ref in react refers to creating a reference to something. A ref is an escape hatch from React, allowing you to peek directly inside the component or DOM, whatever you like.

As the name suggests, Server Side Rendering basically means your server renders your React code into the DOM-like code you saw above, so that browser could directly render it without any/minimal JS support.

Server-Side Rendering takes one step from the client back into the server, that is, parsing the React code logic. In its very essence, SSR means the backend is doing most of the job and delivering the pages to the frontend, instead of the client making heavy use of JS for routing and state management.

Server-Side Rendering takes one step from the client back into the server, that is, parsing the React code logic. In its very essence, SSR means the backend is doing most of the job and delivering the pages to the frontend, instead of the client making heavy use of JS for routing and state management. That was how applications using PHP used to work back in the days. But with enhancement in JS standards and better-performing devices and smartphones, client-side rendering is becoming much more popular these days.
If client-side rendering is so good, why are we considering server-side rendering in the 2020 decade? Well, SSR has its own benefits which cannot be ignored, some of them includes:
SEO: Search engines love reading HTML markup and making sense of the page out of that. Most of the search engines, except advanced ones like Google, cannot really interpret a lot of JavaScript and hence have to rely heavily on what your “source code” says.

Performance: There is an obvious boost in performance when you’re using SSR. Since SSR involves rendering a page already before delivering, you don’t have to worry about different browser support, different device support APIs, etc.