HypeTech
Tech education and shaping ideas into
hype products
hypetech.io | reactweek.dev
Marko Arsić
Founder and CEO @ HypeTech
Founder of HypeTech Education
Senior Software Engineer @ adidas
Lecturer @ ReactWeek.dev
Independent Tech Consultant
Helping companies set up teams and standardize the
development process
github.com/marsicdev
Slide 3
Slide 3 text
React v17.0
Oct 2020
Slide 4
Slide 4 text
No New Features
Primarily focused on making it easier to
upgrade React itself
Easier to embed React into apps built with
other technologies
Slide 5
Slide 5 text
React v18.0
Slide 6
Slide 6 text
Automatic Batching
Starting with performance, we’ve got huge
improvements to automatic batching.
Slide 7
Slide 7 text
Before React 18, React already batched (aka
grouped) multiple state updates into one to
reduce unnecessary re-renders.
Slide 8
Slide 8 text
Automatic Batching it happened only in DOM
event handlers, so Promises, timeouts, or
other handlers didn’t take advantage of that.
Slide 9
Slide 9 text
With v18, React will batch state updates no
matter where they happen
Slide 10
Slide 10 text
State of React State
Management
Slide 11
Slide 11 text
The state describes the condition of an
application at a given point in time.
Slide 12
Slide 12 text
One of challenges in React application
is the management of state
Slide 13
Slide 13 text
React alone is not sufficient
to handle the state complexity
Slide 14
Slide 14 text
React components have a built-in state
object.
The state is encapsulated data where you
store assets that are persistent between
component renderings.
Slide 15
Slide 15 text
The state is just a fancy term for a
JavaScript data structure.
Slide 16
Slide 16 text
If a user changes state by interacting with
your application, the UI may look completely
different afterwards, because it's
represented by this new state.
Slide 17
Slide 17 text
Types of state
Slide 18
Slide 18 text
Persistent State
-
lives on the server and it is accessible, for
example, via a REST endpoint
Slide 19
Slide 19 text
Navigation State
-
where is the user in the application? Is he on
the sign-in page, the sign-up page or the
profile page?
Slide 20
Slide 20 text
Local UI State
-
what is the colour of the button? Is the panel
expanded or not? Is the modal open
Slide 21
Slide 21 text
Client State
-
filters selected by the user when dealing
with a large list of items, the current page in
the list of items, table sorting, pagination,
infinite scroll
Slide 22
Slide 22 text
Context
Slide 23
Slide 23 text
Context is designed to share data that can be
considered “global” for a tree of React
components
Slide 24
Slide 24 text
For example
Current authenticated user, theme, or
preferred language
Slide 25
Slide 25 text
Context is primarily used when some data
needs to be accessible by many
components at different nesting levels
Slide 26
Slide 26 text
If you only want to avoid passing some props
through many levels,
component composition is often a simpler
solution than context
Slide 27
Slide 27 text
Redux
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
RTK Query
-
Takes inspiration from other tools that have
pioneered solutions for data fetching, like
Apollo Client, React Query, Urql, and SWR,
but adds a unique approach to its API
design
Slide 30
Slide 30 text
● The data fetching and caching logic is built on top of
Redux Toolkit
● RTK Query's functionality can be used with any UI
layer
● RTK Query can also generate React hooks that
encapsulate the entire data fetching process
Slide 31
Slide 31 text
React Query
v3
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Performant and powerful data
synchronization for React
Slide 34
Slide 34 text
Fetch, cache and update data in your React
and React Native applications all without
touching any "global state".
Slide 35
Slide 35 text
It makes fetching, caching, synchronizing
and updating server state in your React
applications a breeze.
Slide 36
Slide 36 text
Good DevTools support
Slide 37
Slide 37 text
Apollo Client
Slide 38
Slide 38 text
With Apollo's declarative approach to data
fetching, all of the logic for retrieving your
data, tracking loading and error states, and
updating your UI is encapsulated by the
useQuery Hook.
Slide 39
Slide 39 text
This encapsulation makes integrating query
results into your presentational components
a breeze!
Slide 40
Slide 40 text
Good DevTools support
Slide 41
Slide 41 text
SWR
Slide 42
Slide 42 text
The name “SWR” is derived from
stale-while-revalidate,
a HTTP cache invalidation strategy
Slide 43
Slide 43 text
SWR is a strategy to first return the data
from cache (stale), then send the fetch
request (revalidate), and finally come with
the up-to-date data.
Slide 44
Slide 44 text
Other tools
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Decision-making process
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Simplify Your State
Slide 49
Slide 49 text
1. Identify the type of state
2. Keep your state data as close as possible
benefits: maintainability and performance.
3. Don't keep your entire state globally
benefits: increased complexity, hard to maintain
Slide 50
Slide 50 text
Summary
Slide 51
Slide 51 text
As the application is starting to grow, so does
the complexity of managing the state.
Slide 52
Slide 52 text
the state management strategy is not
something that you want to add late in your
project
Slide 53
Slide 53 text
you should plan for it because it can be the
decisive factor for the success or failure of
your application
Slide 54
Slide 54 text
“If you fail to plan, you are planning to fail!
”
- Benjamin Franklin
Slide 55
Slide 55 text
Q & A
As everything good in life, knowledge is great only when shared
https://discord.gg/94uhCAkFKf
Slide 56
Slide 56 text
As everything good in life, knowledge is great only when shared
hypetech.io/education