Recent React
Learn about new and and upcoming features in React like hooks, suspense, lazy, memo, and more!
@nlsmith
@nlsmith
What is React?
“A JavaScript library for building user interfaces”
React is a declarative way to build web applications based around components.
Some reading:
@nlsmith
Example App
https://github.com/smith/pokemon-example
@nlsmith
Hooks
@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
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
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
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
useReducer
https://reactjs.org/docs/hooks-reference.html#usereducer
“(If you’re familiar with Redux, you already know how this works.)”
@nlsmith
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