This document discusses strategies for improving performance in React applications. It addresses data fetching, ensuring loading states match between server-side and client-side rendering, and state management. It suggests using Suspense for data fetching to avoid double rendering, hydrating pre-rendered HTML on the client, and considering alternatives to Redux like React Context or React Sweet State for state management.

1. A Journey
through a slow
React application
⛵ ❤ _

2. PAVITHRA KODMAD
@PKodmad

3. ASSUMPTIONS
❤
@PKodmad

4. ASSUMPTIONS
This is Jira
@PKodmad

5. issue view
https://www.page1.com/browse/issue-1
My Project My Project/issue-1
Burning task, please complete!
Customer is really pissed about this, find a way to fix this.
There’s really no legit way to reproduce this yet, but you gotta
try more.
ASSIGNEE
PK
LAUNCH DATE
29/02/2019
ESTIMATE
200
BOARD
BACKLOG
ISSUES
REPORTS
ASSUMPTIONS
@PKodmad

6. Backlog
https://www.page1.com/projectkey/backlog
My Project
BOARD
BACKLOG
ISSUES
REPORTS
BACKLOG
ISSUE 1 - Fix this first
ISSUE 2 - Fix this next
ISSUE 3 - Fix this later
ISSUE 4 - Fix this never
ASSUMPTIONS
@PKodmad

7. Board
https://www.page1.com/projectkey/board
My Project
BOARD
BACKLOG
ISSUES
REPORTS
BOARD
TO DO
Fix this never
Issue - 4
Fix this if possible
Issue - 3
WIP
Fix this next
Issue - 2
DONE
Fix this first
Issue - 1
ASSUMPTIONS
@PKodmad

8. ASSUMPTIONS
Client Side Rendering = React.render()
issue view
https://www.page1.com/browse/issue-1
My Project My Project/issue-1
Burning task, please complete!
Customer is really pissed about this, find a way to fix
this. There’s really no legit way to reproduce this yet,
but you gotta try more.
ASSIGNEE
PK
LAUNCH DATE
29/02/2019
ESTIMATE
200
BOARD
BACKLOG
ISSUES
REPORTS
Fix fast! Can’t wait
COMMENTS
@PKodmad

9. ASSUMPTIONS
Server Side Rendering = React.renderToString()
issue view
https://www.page1.com/browse/issue-1
My Project My Project/issue-1
Burning task, please complete!
Customer is really pissed about this, find a way to fix
this. There’s really no legit way to reproduce this yet,
but you gotta try more.
ASSIGNEE
PK
LAUNCH DATE
29/02/2019
ESTIMATE
200
BOARD
BACKLOG
ISSUES
REPORTS
Fix fast! Can’t wait
COMMENTS
@PKodmad

10. ASSUMPTIONS
SPA - Single Page Application
@PKodmad

11. ASSUMPTIONS
TTR - Time to render
TTI - Time to Interactive
@PKodmad

12. REACT PERFORMANCE
@PKodmad

13. Do you really have a problem with
performance though?
@PKodmad

14. IN THREE ACTS
@PKodmad

15. The data fetching duality
ACT 1
@PKodmad

16. @PKodmad
DATA IN SSR
data = fetch()
store = createStore()
state = store.getState()
window.SSR_DATA = state

17. @PKodmad
DATA IN SPA
initialState = window.SSR_DATA
store = createStore(initialState)

18. @PKodmad
Router

19. @PKodmad
❌

20. <Router>
{children}
<Router/>
<PrefetchCacheProvider>
<PrefetchCacheProvider/>
Powered by react context
@PKodmad

21. { (data, loading) =>
<PartofApp data={data} />
}
<PrefetchQuery resolve={}>
<PrefetchQuery/>
Only to be used in
case of SSR
@PKodmad

22. Route?
@PKodmad

23. Double rendering strategy
👍 for reuse
🤒 for performance
@PKodmad

24. treewalk +TTR = fetch + render
@PKodmad

25. treewalk +TTR = fetch + render
@PKodmad

26. Thanks react-router docs.
@PKodmad

27. @PKodmad
<SuspenseForSSR />
PREFERRED
SOLUTION

28. The loading page congruence
ACT 2
@PKodmad

29. @PKodmad
SSR HTML ❌= Client HTML
1. Analytics HOC
2. Logging Infra
3. In product help

30. @PKodmad
React.hydrate(<App />)
❌

31. @PKodmad
issue view
https://www.page1.com/browse/issue-1
My Project My Project/issue-1
Burning task, please complete!
Customer is really pissed about this, find a way to fix this.
There’s really no legit way to reproduce this yet, but you gotta
try more.
ASSIGNEE
PK
LAUNCH DATE
29/02/2019
ESTIMATE
200
BOARD
BACKLOG
ISSUES
REPORTS

32. If you intentionally need to render
something different on the server and
the client, you can do a two-pass
rendering.
@PKodmad
Double render?
https://reactjs.org/docs/react-dom.html#hydrate

33. @PKodmad
const html = saveSSRHTML()
React.render(<App />)
if (loading) { }if (loading) { <div dangerouslySetInnerHTML={html} /> }

34. @PKodmad
PREFERRED
SOLUTION
🤷

35. The state management formulation
ACT 3
@PKodmad

36. @PKodmad

37. @PKodmad

38. https://github.com/facebook/react/issues/13739
@PKodmad

39. https://github.com/reduxjs/react-redux/issues/1177
@PKodmad

40. https://github.com/facebook/react/issues/14110
@PKodmad

41. react-sweet-state
@albertogasparin

42. https://github.com/atlassian/react-sweet-state/blob/
b155c6b6eab13df306d6413dee343b0bd8d99846/src/context.js
@PKodmad

43. Scaling perf issues
Lack of selectors
Debugging workflow
Provider hell
@PKodmad

44. @PKodmad
PREFERRED
SOLUTION

45. Honorable mentions
• React.memo()
• Lighter SSR components
• Page Ready indicator
@PKodmad

46. Thanks for the dev tools
@PKodmad

47. @PKodmad
“All good things happen just outside of your comfort zone”

48. @PKodmad

49. If you send some props
Its so lovely..
If you set the state
Its okay..
If you send some props
Its so lovely..
If you set the state
Its okay..
@PKodmad

50. You sync the DOM
By next tick tick tick
By next tick tick tick
Reeeact.. 😂
@PKodmad

51. Million providers with no owners
Million memoized functions I write
Million components I create
Million renders squeeze my thread
Time for some hooks..
Tick tick tick
@PKodmad

52. @PKodmad
Thank you for all the ❤