(Day 7 of 100) React 2

Topics Covered: setState, Stop Auto Function Trigger, React Re-render, Lifecyle hooks

What I learned:

1. You don’t want to modify state directly outside of setState function. (But why?)

Bad practice

Better method

2. By adding parenthesis after the function name, you are automatically invoking it.

This will automatically invoke every time it is fired not even the button is clicked

By wrapping around the arrow function, the function won’t automatically fire, except when you click on the button

3. filter function cycles through a given array and if the condition is false, it will filter out that element from array.

4. When the state changes, react will re-render the page (Only on the difference)

This is what happens: when state is updated, react compares currentl DOM and new DOM and only updates the difference, this is why react is efficient [Soruce]

5. when css file is imported in one of the react component, it will automatically be applicable to all other components.

6. For modular css. I will revisit the link

7. React lifecycle

Source

Example of using life-cycle hook

Result of using the life-cycle hook

Total time spent on the challenge: 3 hours

Actual Time focused on the challenge: 1.5 hours

What I did:

1. Continued studying on React. Watched net ninja youtube videos series ‘Complete React Tutorial (with Redux) from 15–23)

Plan for the next day:

1. continue learning React

I will keep you updated. Thanks for reading!