Building Great User Experiences with React Query

Building Great User Experiences

Did you know 88% of online consumers are less likely to return to a website after a bad experience?

Source: Gomez Peak Time Internet Usage Study (2010)

@antwansherif

Senior Software Engineer @Shore

@antwansherif

Antwan Sherif

Building Great User Experiences

User Experience

A good UX is when the user can achieve a certain objective in the easiest, fastest, and most pleasurable way possible

User Experience

A good UX is when the user can achieve a certain objective in the easiest, fastest, and most pleasurable way possible

User Experience

A good UX is when the user can achieve a certain objective in the easiest, fastest, and most pleasurable way possible

User Experience

A good UX is when the user can achieve a certain objective in the easiest, fastest, and most pleasurable way possible

Why User Experience matters?

1. buy more

Give customers a great experience, and they’ll:

2. become more loyal

3. share their experience with friends

Why User Experience matters?

On the other hand, give the user bad experience and they will walk away...

even after a SINGLE bad experience

Let's take a journey in

distinguished UX examples/strategies

A. Help users imagine

B. Engage them more

C. Help users do more in less time

How can we enhance UX as engineers?

Global State

Avoid prop drilling

Single source of truth

Shared communication

const globalState = {
  theme: 'dark',
  isMenuOpen: true,
  modals: [],
  selectedBook: {...},
  auth: {
    accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2V4YW1wbGUuYXV0aDAuY29tLyIsImF1ZCI6Imh0dHBzOi8vYXBpLmV4YW1wbGUuY29tL2NhbGFuZGFyL3YxLyIsInN1YiI6InVzcl8xMjMiLCJpYXQiOjE0NTg3ODU3OTYsImV4cCI6MTQ1ODg3MjE5Nn0.CA7eaHjIHz5NxeIJoFK9krqaeZrPLwmMmgI_XiQiIkQ',
    name: 'John Doe',
    email: 'welcome@john.com',
    avatar: 'https://example.com/avatar.png'
  },
  books: [...],
  lists: {
    read: [...],
    toRead: [...],
    currentlyReading: [...]
  },
  clubs: [...],
  settings: {...}
}

Global State

App state

const globalState = {
  theme: 'dark',
  isMenuOpen: true,
  modals: [],
  selectedBook: {...},
  auth: {
    accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2V4YW1wbGUuYXV0aDAuY29tLyIsImF1ZCI6Imh0dHBzOi8vYXBpLmV4YW1wbGUuY29tL2NhbGFuZGFyL3YxLyIsInN1YiI6InVzcl8xMjMiLCJpYXQiOjE0NTg3ODU3OTYsImV4cCI6MTQ1ODg3MjE5Nn0.CA7eaHjIHz5NxeIJoFK9krqaeZrPLwmMmgI_XiQiIkQ',
    name: 'John Doe',
    email: 'welcome@john.com',
    avatar: 'https://example.com/avatar.png'
  },
  books: [...],
  lists: {
    read: [...],
    toRead: [...],
    currentlyReading: [...]
  },
  clubs: [...],
  settings: {...}
}

Global State

App state

Server state

const globalState = {
  theme: 'dark',
  isMenuOpen: true,
  modals: [],
  selectedBook: {...},
  auth: {
    accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2V4YW1wbGUuYXV0aDAuY29tLyIsImF1ZCI6Imh0dHBzOi8vYXBpLmV4YW1wbGUuY29tL2NhbGFuZGFyL3YxLyIsInN1YiI6InVzcl8xMjMiLCJpYXQiOjE0NTg3ODU3OTYsImV4cCI6MTQ1ODg3MjE5Nn0.CA7eaHjIHz5NxeIJoFK9krqaeZrPLwmMmgI_XiQiIkQ',
    name: 'John Doe',
    email: 'welcome@john.com',
    avatar: 'https://example.com/avatar.png'
  },
  books: [...],
  lists: {
    read: [...],
    toRead: [...],
    currentlyReading: [...]
  },
  clubs: [...],
  settings: {...}
}

Global State

Server State

Client State

≠