Recent React

Learn about new and and upcoming features in React like hooks, suspense, lazy, memo, and more!

@nlsmith

@nlsmith

What is React?

https://reactjs.org/

“A JavaScript library for building user interfaces”

React is a declarative way to build web applications based around components.

Some reading:

  • Getting Started: It has great docs, got to read them all.
  • React as a UI Runtime: An advanced, deep dive blog post examining how React works.

@nlsmith

Example App

https://github.com/smith/pokemon-example

  • No state or interactivity. All static data
  • Made with Create React App
  • We’ll use PokéAPI for data
  • Let’s make it work!

@nlsmith

Hooks

https://reactjs.org/docs/hooks-reference.html

  • useState
  • useEffect

@nlsmith

useState

https://reactjs.org/docs/hooks-state.html

const [thing, setThing] = React.useState<TypeOfTheThing>(initialThing)

get

set()

@nlsmith

useEffect

function cleanup () {}

function didUpdate () { /* do an effect */ return cleanup }

useEffect(didUpdate, dependenciesArray)

@nlsmith

Profiler

https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html

“React 16.5 adds support for a new DevTools profiler plugin. This plugin uses React’s experimental Profiler API to collect timing information about each component that’s rendered in order to identify performance bottlenecks in React applications. It will be fully compatible with our upcoming time slicing and suspense features.”

@nlsmith

4. Profiler

Memo

https://reactjs.org/docs/react-api.html#reactmemo

React.memo is a higher order component. It’s similar to React.PureComponent but for function components instead of classes.

@nlsmith

5. Memo

useCallback

Const memoizedCallback = useCallback(callback, [deps])

@nlsmith

useMemo

const memoizedValue = useMemo(() => value, [deps])

@nlsmith

Lazy

https://reactjs.org/docs/code-splitting.html#reactlazy

The React.lazy function lets you render a dynamic import as a regular component.

@nlsmith

6. Lazy/Suspense

Suspense

https://reactjs.org/docs/code-splitting.html#suspense

If the module containing the OtherComponent is not yet loaded by the time MyComponent renders, we must show some fallback content while we’re waiting for it to load - such as a loading indicator. This is done using the Suspense component.

@nlsmith

Loading icon: https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif

useReducer

https://reactjs.org/docs/hooks-reference.html#usereducer

(If you’re familiar with Redux, you already know how this works.)

@nlsmith

Loading icon: https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif

React 16.X Roadmap

https://reactjs.org/blog/2018/11/27/react-16-roadmap.html

“We plan to split the rollout of new React features into the following milestones:

@nlsmith

Links

@nlsmith

Thank you!

@nlsmith

@nlsmith