State management in React uses a virtual DOM and local component state to optimize updates compared to previous approaches. Components declare local state that is the single source of truth, and state updates trigger re-renders. To improve performance, React uses a virtual DOM to compare changes before updating the real DOM rather than directly modifying it. Larger applications can use Redux to manage global state immutably across components in a predictable way.

1. State Management
on Reactjs

2. Defining state
1

3. How it used to be
Angular, JQuery, or pure javascript
2

4. Javascript/JQuery
● DOM directly updated by the scripts
● Global variables and dom elements to maintain data and
state.
4

5. Angular
● Easier to get started
● Performance issues
● Two-way data bind - Changes in javascript updates the
view automatically
● Updates DOM directly
5

6. React
Virtual DOM, better state management and
funcional programming
6

7. Virtual DOM
● Compares virtual DOM and DOM before applying new
state
● Better performance
7

8. Local State
● Needs to be explicitly set (!= two way data bind)
● Every setState() triggers a rendering
● Container Components and Stateless components
8

9. Immutability
● Never mutate state and props
● Avoids side effects
9

10. Redux
10

11. 11
Obrigado!
Alguma pergunta?