Why do we have to write functional instead of class components?

tpostoliuk — Fri, 14 Aug 2020 19:14:08 +0000

Yo! Today we talk about nowadays of ReactJS. The front-end industry is growing up increasingly, and we have to get used to it and prepare for all changes in the programming that can happen.

Recently, we write all ReactJS applications on class components. Now, we have React Hooks that provide our functional component, for example, with the state.
Well, let's talk about the advantages of the functional components. Take a look at this small class that just handle change
and render it.

It looks a bit great. Next, I rewrite this component to functional.

Well, it is a small example, but even it shows us how functional components reduce code, and it is the first advantage.

Functional components reduce approximately 25 percent of code that is in class components

The second reason is that React is going to functional programming.
The official documentation says that it is good to
practice using Hooks in new and non-critical components. It does not mean that class would not be supported in the future, it will.

The third reason is not to think about context.
If you write on class, you always thinking about how not to lose context and bind all methods. In the function, you can forget about it in most situations that can happen.

The last reason is reusability. In the function, you can reuse logic, for example, by creating a custom hook and reuse it in every component you want. In class, you can't do it, you must rewrite the whole component.

So, I recommend you to write functional instead of class components.

What is actually CORS?

tpostoliuk — Fri, 14 Aug 2020 09:19:06 +0000

Probably you run into CORS trying to make some request, and don't even understand why it throws you an error in your console. In this post, i want to make it clear what is CORS. Let's begin.

Cross-Origin-Resource-Sharing(CORS) - is just a mechanism that gives access to browser to download resource across domain boundaries. What does it mean? This means that browser restricts cross-origin HTTP request initiated from script for security reason. Fetch API and XMLHttpRequest follow the same-origin policy. It means that unless the response from other origins has the right CORS headers you cannot download resource from origin other than application was loaded.

Here we have requests that use CORS:

Invocations of the XMLHttpRequest or Fetch APIs.
Web Fonts (for cross-domain font usage in @font-face within CSS), so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.
WebGL textures.
Images/video frames drawn to a canvas using drawImage().
CSS Shapes from images.

Accessible methods

There are "simple" requests that don't trigger CORS preflight. But this requests must follow all the conditions below:

One of the allowed methods:
- GET
- HEAD
- POST
Apart from the headers automatically set by the user agent the only headers which are allowed to be manually set are those which the Fetch spec defines as a "CORS-safelisted request-header", which are:
- Accept
- Accept-Language
- Content-Language
- Content-Type (but note the additional requirements below)
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width
The only allowed values for the Content-Type header are:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
No event listeners are registered on any XMLHttpRequestUpload object used in the request; these are accessed using the XMLHttpRequest.upload property.
No ReadableStream object is used in the request.

Let's imagine a little dialog between server and client:

Client: Hey server! Give me some data, please.
Server: Hi, firstly let me check if your request is
"simple" or not. If yes i'll give you data and list of
allowed methods and allowed origins in response.
Client: Okay, no problem. Do your work.

For additional information thanks MDN and Wikipedia

DEV Community: tpostoliuk

Why do we have to write functional instead of class components?

What is actually CORS?

Here we have requests that use CORS:

Accessible methods

Let's imagine a little dialog between server and client: