Fullstack part1 | A more complex state, debugging React apps

The application appears to work. However, it is forbidden in React to mutate state directly , since it can result in unexpected side effects. Changing state has to always be done by setting the state to a new object. If properties from the previous state object are not changed, they need to simply be copied, which is done by copying those propertie... See more

There are a few limitations and rules that we have to follow to ensure that our application uses hooks-based state functions correctly.

The useState function (as well as the useEffect function introduced later on in the course) must not be called from inside of a loop, a conditional expression, or any place that is not a function defining a componen... See more

The syntax may seem a bit strange at first. In practice { ...clicks } creates a new object that has copies of all of the properties of the clicks object. When we specify a particular property - e.g. right in { ...clicks, right: 1 }, the value of the right property in the new object will be 1.

In the example above, this:

{ ...clicks, right: clicks.rig... See more

Now the event handler is a function defined with the arrow function syntax () => console.log('clicked the button'). When the component gets rendered, no function gets called and only the reference to the arrow function is set to the event handler. Calling the function happens only once the button is clicked.

• I will have my browser developer console open all the time


• I progress with small steps


• I will write lots of console.log statements to make sure I understand how the code behaves and to help pinpointing problems


• If my code does not work, I will not write more code. Instead I will start deleting the code until it works or just return to a state when eve

... See more