Oliver Sturm

• Training Director at DevExpress

• Consultant, trainer, author, software architect and developer for 30 years

• Contact: oliver@oliversturm.com

Agenda

• Hooks vs HOCs - what's the point?
  • (Note the amazing wordplay in the previous bullet)
• Standard hooks
• Custom hooks
• Hooks in 3rd party libraries

What's the point of React Hooks?

• React has a functional structure with a side-effect free rendering mechanism
• Preference for functional component implementation
  • Class-based components still remain available!
• HOCs always supported for modularization
• Complex class and HOC structures end up with deep nesting
• Hooks: functional state management based on closures
• Popular by now in other JS-based environments

The Hook Rules

const MyComponent = () => {
  // Only use hook calls at the top level (that's rule 1)
  // of React functions (that's rule 2).
  // Note that "React functions" include custom hooks.
  const [val, setVal] = useState();
  return <div>Val is {val}</div>;
};

Hooks in 3rd party libraries

• 3rd party libraries started adopting hooks quickly
• Most current libraries now offer hooks as an alternative to their old APIs
• Examples coming up: Material UI and Redux

Sources

• This presentation:
  https://oliversturm.github.io/react-hooks/
• Repository with sample code:
  https://github.com/oliversturm/react-hooks
• PDF download:
  https://oliversturm.github.io/react-hooks/slides.pdf