Road to Async Nirvana

Boris Litvinsky, Tech Lead @ Wix
Road to Async Nirvana
borisl@wix.com twitter@borislit linkedin/borislit github.com/borislit

class ProfilePage extends Component {
constructor () {
this.state = {
error: false,
};
}
componentDidMount () {
fetchUser()
.then(user => {
this.setState({
user,
});
})
.catch(() => this.setState({ error: true }));
}
//...
//...
render() {
if (this.state.error) {
return <p>Error!</p>;
}
if (!this.state.user) {
return <p>Loading profile...</ p>;
}
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline />
</>
);
}
}

constructor() {
this.state = {
error: false,
};
}
componentDidMount() {
fetchUser()
.then(user => {
this.setState({
user,
});
})
}
//...
//...
render() {
}
return <p>Loading profile...</p>;
}
return (
<>
<ProfileTimeline />
</>
);
}
}

constructor() {
this.state = {
error: false,
};
}
componentDidMount() {
fetchUser()
.then( user => {
this.setState({
user,
});
})
}
//...
//...
render() {
}
}
return (
<>
<ProfileTimeline />
</>
);
}
}

How is this OK???
This is NOT HOW YOU WRITE JAVASCRIPT!

THIS is how You write Javascript!
function ProfilePage() {
console.log('Loading User Profile...' );
try {
const timeline = await ProfileTimeline ();
console.log('Timeline', timeline);
} catch (e) {
console.log('Error', e);
}
}

Hooks for fetching, caching and updating
asynchronous data in React

Component
Props
State
UI
React in a Slide

Component
Props
State
UI
React in a Slide
Missing in Functional
Component

const [user, setUser] = useState(null);
useEffect(() => {
fetchUser().then(u => setUser(u));
}, []);
return (
<>
<ProfileTimeline />
</>
);
}

▪ useState is a Hook
that lets you add
React state to
function components
useEffect(() => {
}, []);
return (
<>
<ProfileTimeline />
</>
);
}

that lets you add
React state to
function components
▪ useEﬀect lets you
perform side eﬀects in
function components
useEffect(() => {
}, []);
return (
<>
<ProfileTimeline />
</>
);
}

that lets you add
React state to
function components
▪ useEﬀect lets you
perform side eﬀects in
function components
const [error, setError] = useState(false);
useEffect(() => {
fetchUser().then(u => setUser(u)).catch(() => setUser(true));
}, []);
if (error) {
}
if (user === null) {
}
return (
<>
<ProfileTimeline />
</>
);
}

▪ Compose hooks to
create custom hooks
function useProfile() {
useEffect(() => {
}, []);
return {user , error};
}
const {user, error} = useProfile();
}
return (
<>
<ProfileTimeline />
</>
);
}

Components are Functions
Hooks are Functions
Functions can Compose

The Component...
▪ Doesn’t know what’s the source of the data
▪ Does know that it will be notiﬁed when the data changes

useEffect(() => {
}, []);
return { user, error };
}
const { user, error } = useProfile();
}
return (
<>
<ProfileTimeline />
</>
);
}
Local to a Component

React
Context
State
Management

Not All State is Born Equal
▪ Server state and component state serve diﬀerent purposes
▪ Server state is global, while component state is local
▪ Server has unique concerns (caching, pagination, synchronization)

1. Abstracts Away Async
Call
2. Handles requests
states
3. Stores Results in a
cache
useEffect(() => {
}, []);
return { user, error };
}
}
return (
<>
<ProfileTimeline />
</>
);
}

return useQuery([user, id],(id) => fetchUser(id));
}
}
return (
<>
<ProfileTimeline />
</>
);
}
1. Abstracts Away Async
Call
2. Handles requests
states
3. Stores Results in a
cache

React Query Gives You...
▪ Loading states
▪ Mutations
▪ Optimistic updates
▪ Calls de-duping
▪ Pagination
▪ Query Dependencies
▪ Caching
const {
isLoading,
isSuccess,
isError,
data,
error,
failureCount,
refetch,
retry
} = useQuery(/*..*/)

const [mutate] = useMutation(addTodo, {
onSuccess: () => {
queryCache.refetchQueries('todos')
queryCache.refetchQueries('reminders')
},
})
Query/Mutation Dependency

Caching
function ChildComponent() {
const { data } = useQuery('todo');
return <div>{data}</div>;
}
function Root() {
//Do Something With Todos
return <ChildComponent />;
}
Resolved from
cache
Fires a request

Self Contained Components
Location-Independent

Caching
}
function Root() {
const [shouldRenderChild, setShouldRenderChild] = useState(false);
return <div>{shouldRenderChild && <ChildComponent />} </div>;
}
Resolved from
cache
Fires a request

Caching
}
function Root() {
}
ChildComponent tests
become async
Root tests
become async

Leaving You with some Suspense

Where we stand function ProfilePage() {
const { user, isError, isLoading } = useProfile();
if (isError) {
return <p>Error</p>;
}
if (isLoading) {
}
return (
<>
<h1>{data.name}</h1>
</>
);
}

Where we stand
▪ Handle missing data
▪ Handling errors
▪ Boilerplate
▪ What if the
component is
reusable?
if (isError) {
}
if (isLoading) {
}
return (
<>
</>
);
}

Where we stand
if (isError) {
}
if (isLoading) {
}
return (
<>
</>
);
}
Solved by
Error Boundaries

Where we stand function ProfilePage() {
const { user, isLoading } = useProfile();
if (isLoading) {
}
return (
<>
</>
);
}
<ErrorBoundery>
<ProfilePage />
</ErrorBoundery>
Error Boundary

Where we stand
const { user, isLoading } = useProfile();
if (isLoading) {
}
return (
<>
</>
);
}
?

<Suspense> component lets you “wait” for any
asynchronous work and declaratively specify a
loading state (like a spinner) while we’re waiting

The Suspense Way
▪ Try to render ProfileDetails
▪ ProfileDetails tries reading
user details
▪ React “suspends”
ProfileDetails rendering and
renders fallback
▪ React “resumes”
ProfileDetails rendering once
user details are available
return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails />
</Suspense>
);
}
function ProfileDetails() {
// Try to read user info, although it might not have loaded yet
const user = useProfile();
return <h1>{user.name}</h1>;
}

The Suspense Way
▪ Suspense is a
component
▪ “Suspended”
components will fallback
to the closest Suspense
ancestor
return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails />
<Suspense fallback={<h1>Loading posts...</h1>}>
<ProfileTimeline />
</Suspense>
</Suspense>
);
}

function ProfileDetails() {
const user = useProfile();
return <h1>{user.name}</h1>;
}
This is HARD*

function Root() {
}
React-Query supports Suspense OOB
Suspends
Rendering

This get EVERYBODY...
▪ Thinking about resilience
▪ Thinking about performance

At Wix this is now an integral part of product
design and architecture review

Summary
▪ Hooks are a paradigm shift
▪ React Query uses hooks to simplify fetching/mutating async data
▪ React Query classifying your state.
▪ Cache responses allows co locating the data requirements with the
components
▪ Combined with Suspense, it promotes error handling, resilience and
performances

Thank You
borisl@wix.com twitter@borislit linkedin/borislit github.com/borislit

Road to Async Nirvana

More Related Content

What's hot (20)

Similar to Road to Async Nirvana (20)

More from Boris Litvinsky (7)

Recently uploaded (20)

Road to Async Nirvana