React Aims & Objectives 2

What we did last week:

• Components (stateful and stateless)
  • How they fitted together
• React Router (guide)
  • Do look at redirects, 404 and params (and query params)!

What we're doing today:

• Updates
  • lifecycle methods
  • Doing away with the constructor
• New
  • refs (and forwardRef)
  • portals
  • error boundaries
  • forms

New Lifecycle Methods

• N.B. Most Lifecycle methods are meant to be rarely used. They are to catch edge cases
• When we 'extends React.Component' - here is a full list of what React's basic component comes with: https://reactjs.org/docs/react-component.html
  • It has all the methods
  • Any starting with UNSAFE_ are just that
  • Pay attention to error handling (covered in error boundaries)

Doing away with the Constructor

• Under the hood you don't
• You use a thing called esnext class properties
  • They are transpiled by babel to create the constructor behind the scenes
• Details and controversy
• demo

refs

• Refs are about getting a physical reference to an element in the DOM
• Refs are not very react-like
• They should be avoided where possible
• BUT in some cases they are correct to use:
  1. You've rendered a video into the page and want to set it playing using .play()
  2. You've got a form in the page and you want to focus an input
  • These don't require a re-rendering of a page as they are basic DOM functionality
• refs demo
• passing refs from parent components (forwardRef)

Portals

• NOT really a big thing
• Used to put data in another part of the page
• Useful when parent component has its overflow hidden
• demo

Error Boundaries

• For optimisation, react throws some weird and obscure errors
• To be able to see the component tree in the stack trace we create a component called an error boundary and wrap child components in it
• demo
• Not to be used for normal try/catch, more for unexpected errors

React Hooks

• So you don't have to change between class and function when adding/removing state from a component
• demo

Forms In React

• Rather than take the values from the DOM we run them through the state.
  • This gives us 'controlled components' whose values are held in the state and can only be updated through the state.
    • Gives an opportunity for validation
    • Means we don't have to serialise the form, just send the data in the state
    • demo of controlled vs uncontrolled
• A solution like Formik may be better (demo)
  • Forms can be validated at 'form level' (all at once on submission) or field level (as you type)
  • Yup is a great peer dependancy for Formik
• LATEST WAY: react-hook-form (demo)