Win a copy of Kotlin in Action this week in the Kotlin forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

setInterval  RSS feed

 
Giovanni Montano
Ranch Hand
Posts: 409
7
Android Open BSD Slackware
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I move my first steps in JS and React,  I have a Java background
Is not clear the flux: which instruction the compiler(?) execute and then what order follow.
In this example I have some questions:

1) Is the order of execution: `render` that calls the element `element` above, and then? are all the other eventual method get sequentially called also if nobody explicitly call them?
2)There is setInterval for instance, that (from a Java point of view) is not instantiated by nobody, but still get called( because is not a class), correct?
3) if I cancel setInterval( playing with the code) even Hello World does not appear, why?
4) what is the best tool to debug when does not appear nothing on the page, as it is the case if I erase the last line setInterval()? is console log I guess?
 
Giovanni Montano
Ranch Hand
Posts: 409
7
Android Open BSD Slackware
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
starting to learn


1)yes render call element, is the first instruction.No are not sequentially called, that is why ReactJs has the concept of class
2)No, is a strange newbe example because  i guess setInterval has a callback that have to be called because is called the method toLocaleTimeString() but not sure about this point
3)Because Hello, world is called by setInterval
4) there are some specifical tools
 
Michael Matola
whippersnapper
Ranch Hand
Posts: 1838
5
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This example is from Facebook's React tutorial. By their own admission, it's some very unusual React code (because ReactDOM.render gets called many times; more typically in a React application ReactDOM.render gets called only once). In the tutorial they're taking very small steps so you get some fundamental ideas. Subsequent steps in the tutorial will rework this small feature into a fuller React application, written in more idiomatic React.

Let's step through the code. It's really basic JavaScript -- barely any React at this point. First a function called tick gets defined. Then the built-in function setInterval is called. Two arguments are passed into setInterval: the tick function and a delay of 1000 (milliseconds). So, in other words, this code



Says to wait one second then execute the tick function, then wait another second and execute the tick function again, and so on. setInterval is a built-in function that executes the callback function you provide, repeatedly, delayed by the amount of time you indicate. (There are some nuances with setInterval, but they're not important here.)

Each time the tick function gets executed, a new React element (stored in the local variable "element") gets created. That element will produce the HTML markup per the JSX code. The part in curly brackets -- {new Date().toLocaleTimeString()} -- allows a JavaScript expression to get executed as part of generating the HTML. In this case, it creates a new Date object (representing the date/time at the time of execution) formatted per Locale conventions. ReactDOM.render finds the DOM element with the ID "root" and sets the HTML generated by the React element "element" as the "root" element's inner HTML.

So each time the tick function gets executed, it replaces some HTML in the DOM. That HTML displays the current time.

(This exact example could have been coded fairly easily with plain, vanilla JavaScript, by the way.)

From a React standpoint, this approach (conceptually) is fairly inefficient, constantly rewriting the entirety of the HTML under the "root" element. Later examples in the tutorial will show you how to build a React application to call ReactDOM.render only once in your code, and the seeming magic of React will only update the parts of the DOM that are absolutely necessary to update. ("Update" here is a not entirely accurate. React is largely about efficiently *replacing* parts of the DOM.)

Giovanni Montano wrote:
1) Is the order of execution: `render` that calls the element `element` above, and then? are all the other eventual method get sequentially called also if nobody explicitly call them?


Calling setInterval() in the last line is what sets this all in motion. setInterval sets up the timer that calls tick every second. tick first generates the React element it stores in the variable "element" then it calls ReactDOM.render() to update the DOM. There's really no magic (and not much React) going on here.

2)There is setInterval for instance, that (from a Java point of view) is not instantiated by nobody, but still get called( because is not a class), correct?


setInterval is a built-in function on the browser's global object "window." It's a function, and it gets called as a function.

3) if I cancel setInterval( playing with the code) even Hello World does not appear, why?


By cancel do you mean clearInterval? If so, then it depends on timing of the setInterval and clearInterval calls.

4) what is the best tool to debug when does not appear nothing on the page, as it is the case if I erase the last line setInterval()? is console log I guess?


If by cancel you mean you comment out or remove the code, then of course nothing will appear. Nothing is calling tick or really doing much of anything then. If you're uncomfortable with setInterval you could call tick() to display the time just once, but that's sort of missing the point of the example.
 
Giovanni Montano
Ranch Hand
Posts: 409
7
Android Open BSD Slackware
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Michael Matola wrote:This example is from Facebook's React tutorial. By their own admission, it's some very unusual React code (because ReactDOM.render gets called many times; more typically in a React application ReactDOM.render gets called only once). In the tutorial they're taking very small steps so you get some fundamental ideas. Subsequent steps in the tutorial will rework this small feature into a fuller React application, written in more idiomatic React.

What a nice reply, hope to count on you for some future doubt. Thanks.
yep but they should take into account that there are people that stop if they do not get things. I recognize this is a wrong approach for a principiant





Let's step through the code(..will come back to you within 2 days)
 
Giovanni Montano
Ranch Hand
Posts: 409
7
Android Open BSD Slackware
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Michael Matola wrote:
> (This exact example could have been coded fairly easily with plain, vanilla JavaScript, by the way.)

this makes perfect sense thank you for this clarification, is for learning the language but not efficient per se

Michael Matola wrote:
> (This exact example could have been coded fairly easily with plain, vanilla JavaScript, by the way.)

another little gem that clarifies the example was for educational purposes, not efficient at all

Michael Matola wrote:
>Calling setInterval() in the last line is what sets this all in motion. setInterval sets up the timer that calls tick every second. tick first >generates the React element it stores in the variable "element" then it calls ReactDOM.render() to update the DOM. There's really no >magic (and not much React) going on here.

My only question is who call setInterval then. I think that being a newbe example misses elements. So is a javascript environment  so that could be inside a <script> tag referring to a root id in a html page.
because what matters in React is what is inside
Reactdom.render(
, specifically what came before  
document.getElementById('root')
that is usually a tag that refer to a class tagInsideReactDomDotRender extends ReactComponent, that will have  a render method inside that will be called the first time and EVERY time there is a change( or better replacement of part of the DOM)

Michael Matola wrote:
If by cancel you mean you comment out or remove the code, then of course nothing will appear.

yes now I understood is really clear all, and now looks super simple
thank you






 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!