1 of 25

LIFTING STATE UP

IS

KILLING YOUR APP

GONCHAROV.PAGE

2 of 25

REACT

ANGULAR

ANGULARJS

JQUERY

HTML

CSS

LESS

SASS

SOME OTHER

OVERHYPED

THING

NODEJS

NODEJS

NODEJS

NODEJS

NODEJS

NODEJS

NODEJS

NODEJS

NODEJS

NODEJS

NODEJS

3 of 25

4 of 25

LOVE

OPEN

SOURCE

5 of 25

IN-MEMORY DATA GRID

SCALABLE

EASY DEPLOYMENT

DISTRIBUTED

AP OR CP - YOUR CHOICE

NEAR CACHE

OPEN-SOURCE

CLIENTS FOR LOTS OF LANGUAGES

6 of 25

MANAGEMENT CENTER

CLUSTER STATISTICS

CLUSTER MONITORING

DATA STRUCTURE STATISTICS

DATA BROWSER

SCRIPTING

ALERTS

CLUSTER ADMINISTRATION

7 of 25

8 of 25

9 of 25

  1. Lift state up
    1. Create naive implementation
    2. Refactor using standard practices
    3. See where it fails and why
  2. Move state down

10 of 25

11 of 25

12 of 25

13 of 25

14 of 25

15 of 25

!= 0

16 of 25

17 of 25

PARENT RE-RENDERED

18 of 25

STATE UPDATED

19 of 25

CONTEXT UPDATED

20 of 25

FORCE UPDATE FIRED

21 of 25

KEY CHANGED

22 of 25

DON’T DO ANY PREMATURE OPTIMIZATIONS

23 of 25

DON’T DO IT

REALLY

24 of 25

https://github.com/aigoncharov/talks

https://itnext.io/react-lifting-state-up-is-killing-your-app-3ad6f0e1213d

25 of 25

ai_goncharov

ai_goncharov

andrey@goncharov.page