Questions from a newbie

Hello readers I’m a newbie in the tech world and I’m doing my internship in a software company!!✨👋 This post is only for those curious about Node.js and React. I answered three questions that are interesting for me. I hope they can be for you as well!!💖

React:

1.How does the componentDidMount work on react?

To understand more about this component is necessary to know that the componentDidMount is executed after the first render only on the client-side. Also, is used for integration and other JS frameworks and functions with delayed implementation. What it does is that updates the current state to cause a new lifecycle method.

The componentDidMount is the ideal place to use setState() method to change the state of an app. For example, it can provoke another rendering before updating the screen, but the feature is that the user will not see the intermediate state.

Remember to import the lifecycle from “.component/lifecycle” in the index.js, also add the LifeCycle in the Dom. Once you execute npm start, you should see in the console the “Executed after the component is mounted” and the “ ComponentDidMount” inside the <div/>.

But how can you know if you needed or when you can use it? Here are four tips:

• Connect a React app to web APIs or JS frameworks.
• Set Timers (setTimeout or setInterval.)
• Event listeners.
• Draw on an element just rendered.

2. Why use arrow functions in React?

This is a JSDoc that has as a benefit communicate about your code. Before reading about the arrow function, it’s important to know what the word “this” means in JS. There are five meanings “this” can have, so let’s see them:

• In a method -> owner object.
• By itself -> global object.
• In a function -> global object.
• Function in strict mode -> is undefined.
• In an event -> element that received the event.

React does not just work with class methods because you can have onClick handles, this means is a class property. Also, “this” helps to prevent bugs because, tells you which method, function, event, etc. Is calling in specific and working with it instead of calling the one in general. In this example we will not see any change because the “handleClick” is not a method. In javaScrip there are no methods, it’s all about functions.

To convert the “method” into function is necessary to add the => this way we can say we’re hard-code the value of “this” where the function is defined. In this case we want the change in the Button tag to be able to give the functionality that is on the handleClick. It would look like this:

Node:

Consider following code snippet: The time required to run this code in Google Chrome is considerably more than the time required to run it in Node.js. Explain why this is so, even though both use the v8 JavaScript Engine.

Answer:

After running the code in chrome and in VisualStudioCode I found out the time each other.

VS: loop: 4.23291015625ms

Chrome: loop: 4.265869140625 ms

So tree more questions pop on my head:

1.What’s V8? The best answer i found and made things easier to understand was “It’s the thing that takes our JavaScript and executes it while browsing with Chrome.” That simple answer from nodejs.dev.

In my own words I understood that V8 is everything that can be rendered in the browser such as: Images, HTML, and CSS.

2. How does v8 work in Chrome? It goes from the JS code to the browser and then come into the V8 (JavaScript Engine).

3.How v8 works in Node.js? It goes from the JS code into the V8 (JavaScript Engine).

In Node.js it works by itself in comparison to chrome that actually has a process or an extra step to do.