React 2020

23 January, 2020

The future of React in 2020.

In this workshop we will learn two things:

React Suspense
React Custom Hooks

Here are some examples of what we will learn:

Suspense

// suspense
export default function App() {
  return (
    <div className="App">
      <React.SuspenseList revealOrder="backwards">
        <React.Suspense fallback={<Loading />}>
          <Rick />
        </React.Suspense>
        <React.Suspense fallback={<Loading />}>
          <Morty />
        </React.Suspense>
        <React.Suspense fallback={<Loading />}>
          <Summer />
        </React.Suspense>
      </React.SuspenseList>
    </div>
  )
}

Custom hooks

// custom hook
export function useInput(initialValue) {
  const [value, setValue] = useState(initialValue)

  const handleInput = e => {
    setValue(e.target.value)
  }

  return {
    value,
    onChange: handleInput
  }
}