I was wondering what is the differnce between states in react and normal variables? How is it able to listen to changes made to states? Does it create an internal hash which keep tracks of those state variables?
Just tested it, it behaves as i suspected ;) it doesn't care if the new state is different to the old one. Here's my dummy component for testing. -> opened a new response because codeformating in replies doesn't work a i expect it :)
import react, {Component} from 'react';
export default class DummyComponent extends Component
{
renderCounter;
constructor() {
super();
this.state = {
'test' : 1
};
this.renderCounter = 0;
this.setDummyState = this.setDummyState.bind(this)
}
setDummyState() {
this.setState(
{
'test' : 1
}
)
}
render() {
this.renderCounter = this.renderCounter+1;
return <button className="btn" onClick={this.setDummyState}>{this.renderCounter}</button>
}
}
state and props are used to detect changes to trigger the renderer.
this.setState({ myKey : 'my-String'});
will trigger a chain of functions which in the end will trigger render()
this.state.myKey = 'my-String'; on the other hand will not trigger the rendering
this is the simple answer :) there are people who are much more qualified to answer that :)
oh and to avoid useless rerendering if the state or props did not change I recommend to read
I have also stumbled upon the same question and have checked in Google Customer Care until now that I am visiting your thread. can anyone please respond to it? every other response would be appreciated...
Candis W
Front-End Developer, Free Code Camp student and aspiring Full Stack Developer
To answer your questions, I think the React.js course at Code School or Codecademy would be really helpful for you if you're interested. Code School is paid, but I think it's on sale right now (although the monthly fee isn't bad) and Codecademy is free. These courses were really helpful for me in explaining how React works behind the scenes. Hope this helps :)