This document discusses using React hooks and the React Query library to manage asynchronous data fetching and state in React functional components. It begins by explaining how hooks like useState and useEffect allow adding local state and side effects to functional components. It then introduces React Query, a library that abstracts away asynchronous data fetching, handles loading states, and caches results. React Query exposes hooks that components can use to fetch data from a centralized cache. The document discusses how React Query handles common concerns like loading states, errors, and dependencies between queries. It concludes by discussing how Suspense can be used to declaratively wait for asynchronous data and show loading states.

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

2. 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 />
</>
);
}
}

3. 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 />
</>
);
}
}

4. 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 />
</>
);
}
}

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

6. 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);
}
}

7. Hooks for fetching, caching and updating
asynchronous data in React

8. But First,
Let’s talk Hook

9. Component
Props
State
UI
React in a Slide

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

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

12. ▪ useState is a Hook
that lets you add
React state to
function components
function ProfilePage() {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser().then(u => setUser(u));
}, []);
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline />
</>
);
}

13. ▪ useState is a Hook
that lets you add
React state to
function components
▪ useEffect lets you
perform side effects in
function components
function ProfilePage() {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser().then(u => setUser(u));
}, []);
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline />
</>
);
}

14. ▪ useState is a Hook
that lets you add
React state to
function components
▪ useEffect lets you
perform side effects in
function components
function ProfilePage() {
const [user, setUser] = useState(null);
const [error, setError] = useState(false);
useEffect(() => {
fetchUser().then(u => setUser(u)).catch(() => setUser(true));
}, []);
if (error) {
return <p>Error!</p>;
}
if (user === null) {
return <p>Loading profile...</p>;
}
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline />
</>
);
}

15. ▪ Compose hooks to
create custom hooks
function useProfile() {
const [user, setUser] = useState(null);
const [error, setError] = useState(false);
useEffect(() => {
fetchUser().then(u => setUser(u)).catch(() => setUser(true));
}, []);
return {user , error};
}
function ProfilePage() {
const {user, error} = useProfile();
if (user === null) {
return <p>Loading profile...</p>;
}
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline />
</>
);
}

16. Components are Functions
Hooks are Functions
Functions can Compose

17. ▪ Compose hooks to
create custom hooks
function useProfile() {
const [user, setUser] = useState(null);
const [error, setError] = useState(false);
useEffect(() => {
fetchUser().then(u => setUser(u)).catch(() => setUser(true));
}, []);
return {user , error};
}
function ProfilePage() {
const {user, error} = useProfile();
if (user === null) {
return <p>Loading profile...</p>;
}
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline />
</>
);
}

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

20. New Dog, Old Issue

21. function useProfile() {
const [user, setUser] = useState(null);
const [error, setError] = useState(false);
useEffect(() => {
fetchUser().then(u => setUser(u)).catch(() => setUser(true));
}, []);
return { user, error };
}
function ProfilePage() {
const { user, error } = useProfile();
if (user === null) {
return <p>Loading profile...</p>;
}
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline />
</>
);
}
Local to a Component

22. React
Context
State
Management

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

24. Not All State is Born Equal

25. Enter

26. 1. Abstracts Away Async
Call
2. Handles requests
states
3. Stores Results in a
cache
function useProfile() {
const [user, setUser] = useState(null);
const [error, setError] = useState(false);
useEffect(() => {
fetchUser().then(u => setUser(u)).catch(() => setUser(true));
}, []);
return { user, error };
}
function ProfilePage() {
const { user, error } = useProfile();
if (user === null) {
return <p>Loading profile...</p>;
}
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline />
</>
);
}

27. function useProfile() {
return useQuery([user, id],(id) => fetchUser(id));
}
function ProfilePage() {
const { user, error } = useProfile();
if (user === null) {
return <p>Loading profile...</p>;
}
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline />
</>
);
}
1. Abstracts Away Async
Call
2. Handles requests
states
3. Stores Results in a
cache

28. 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(/*..*/)

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

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

32. Self Contained Components
Location-Independent

33. Caching
function ChildComponent() {
const { data } = useQuery('todo');
return <div>{data}</div>;
}
function Root() {
const { data } = useQuery('todo');
const [shouldRenderChild, setShouldRenderChild] = useState(false);
//Do Something With Todos
return <div>{shouldRenderChild && <ChildComponent />} </div>;
}
Resolved from
cache
Fires a request

34. This can be Addictive

35. Caching
function ChildComponent() {
const { data } = useQuery('todo');
return <div>{data}</div>;
}
function Root() {
const { data } = useQuery('todo');
//Do Something With Todos
return <ChildComponent />;
}
ChildComponent tests
become async
Root tests
become async

36. Leaving You with some Suspense

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

38. Where we stand
▪ Handle missing data
▪ Handling errors
▪ Boilerplate
▪ What if the
component is
reusable?
function ProfilePage() {
const { user, isError, isLoading } = useProfile();
if (isError) {
return <p>Error</p>;
}
if (isLoading) {
return <p>Loading profile...</p>;
}
return (
<>
<h1>{data.name}</h1>
</>
);
}

39. 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);
}
}

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

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

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

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

44. 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
function ProfilePage() {
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>;
}

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

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

47. function Root() {
const { data } = useQuery('todo');
return <ChildComponent />;
}
React-Query supports Suspense OOB
Suspends
Rendering

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

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

50. Summary

51. 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

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