-
Notifications
You must be signed in to change notification settings - Fork 0
New React 16 features August 8, 2018
Andy Whitley edited this page Aug 21, 2018
·
7 revisions
To gain an understanding of new features available in React V16 and look for opportunities where these might be applied to work on the project.
-
componentWill(Mount|ReceiveProps|Update)
are being deprecated and will be removed in React 17. E-Verify UI makes use of all three. - It's good that they're being deprecated because our implementation is an anti-pattern.
componentWillMount
fires before the render, but is asynchronous. Rather than racing and hoping thatcomponentWillMount
will finish before you need it, the initialrender
should include good default state that permits a complete render, and thencomponentDidMount
can get the updates to state and trigger a new render. - SAVE Mod utilizes
componentWillReceiveProps
in one place and can refactor that use case for the newgetDerivedStateFromProps
which modifies state before rendering using the newly received set of props. https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
- It completely unmounts when there’s an error
- Better stack traces for errors
- Have to decide how granular to be. Not too much and not too little
- Helps expose errors that might have failed silently previously
- The biggest thing with returning fragments rather than DOM elements is that you can think of React components by their function and not just by what makes sense as a DOM element
- For example, if you don't need to do DOM manipulation on a piece of functionality, you can still create a React component by returning a fragment
- This can simplify/clean up your DOM tree by eliminating unnecessary nodes created for the sake of being able to render a component
- React 16.3 introduced the first official Context API for React
- It allows for data to be passed around a React application without have to "drill down" (pass via props multiple levels down through other components that don't need it)
- Instead, related state can be kept in one place and shared with other components with
Provider
andConsumer
components - Similar to the Redux pattern (and designed by the same person, Dan Abramov) but allows for multiple stores of state (instead of the singular store in Redux)
- For updating state, functions can be passed as values via Context as well