3 ms·
I've taken the example from your homepage and made it in React without using redux or hooks. import React, { Component } from 'react' class ManualSta
by chrisabrams 6y ago
I've taken the example from your homepage and made it in React without using redux or hooks.
import React, { Component } from 'react'
class ManualStateComponent extends Component {
state = {
now: null
}
constructor(props) {
super(props)
}
// Since you don't want to call `setState`, here is a method with the name you prefer
rerender() {
this.setState({
now: Date.now()
})
}
}
// Example Component
class SimpleTimer extends ManualStateComponent {
constructor(props) {
super(props)
this.seconds = 0 // Just a plain variable
}
componentDidMount() {
setTimeout(() => {
this.seconds++;
this.rerender() // rerender!
}, 1000)
}
render() {
return <div>{this.seconds} secs have elapsed...</div>;
}
}
gist: https://gist.github.com/chrisabrams/9e140d212098033365a76666a4926af1 https://gist.github.com/chrisabrams/9e140d212098033365a76666...
- chrismorgan 6y agoAnd another comparison, SimpleTimer.svelte: <script> let seconds = 0; setInterval(() => { seconds++; }, 1000); </script> <div>{seconds} secs have elapsed...</div> Note that this deliberately functions slightly differently: it uses setInterval rather than repeated setTimeouts. This makes a much more accurate seconds counter, as setTimeout will wait for at least 1000 milliseconds before incrementing seconds and setting another timeout, meaning that you will always count time too slowly, commonly around 1% too slow, but more at times like if JavaScript execution is being throttled because the page is in the background. If you really wanted to do it the other way, it’d be something like this: <script> let seconds = 0; function increment() { seconds++; setTimeout(increment, 1000); } setTimeout(increment, 1000); </script> <div>{seconds} secs have elapsed...</div>
- hombre_fatal 6y agoThe improvement to this sort of time-tracking is not setInterval vs setTimeout but rather "<div>{(Date.now()-startedAt)/1000} secs have elapsed</div>". That way your clock loses its dep on interval frequency.
- k__ 6y agoA hooks example might look more convincing.
- chrisabrams 6y agoThe OP made it clear they didn't want to use hooks.
- purple-again 6y agoWhy use classes instead of functions. Isn’t the React ecosystem moving away from classes entirely? I remember hearing somewhere that a core maintainer of React stated we should be using function components everywhere now.
- chrisabrams 6y agoOP didn't want to use hooks, so I showed an example that doesn't require hooks. I'm aware some of the React community use hooks, some of us still use classes. Classes provide a better interface when dealing with state that is shared between parent and child. This is a write up much better than I can explain: https://react-redux.js.org/api/hooks#stale-props-and-zombie-children https://react-redux.js.org/api/hooks#stale-props-and-zombie-...
- deleted 6y ago[deleted]
- ricardobeat 6y agoThe 'ManualStateComponent' class is not necessary at all, React has its own rerender function: just call `this.forceUpdate()`.