About React Hooks

Hooks were released this year on February 6, and some of you might have missed them, so this prezentation will get you up to speed.

What is a Hook?

A Hook is a function provided by React, which lets you hook into React features from your functional component. This is exactly what we need to use functional components instead of classes.

Hooks will give you all React features without classes.

Hooks will make your code more maintainable, they will let you reuse stateful logic, and since you are reusing stateful logic, you will avoid the wrapper hull and the component reimplementation.

Actually, Hooks are backward comfortable, so you can update your React safely.

Hooks make React Great Again. You won't need MobX or Redux anymore.

So how to use a Hook? Check our examples in the meetup video!

https://www.youtube.com/watch?v=iIQPIlE9npo


Materials

You can check the code I used during my meetup talk:
https://github.com/RisingStack/react-hooks-meetup

You can download my prezentation here:
https://docs.google.com/presentation/d/17cirj5ZfLXk8f4Dh6yKnBVllNGKAy4k3h-PdloVJ14s/edit?usp=sharing


TLDW:

Try the following Hooks in functional React components:

  • useState for local state
  • useContext for global state
  • useEffect for lifecycles
  • useMemo and useCallback for caching
  • create your custom Hooks using built-in Hooks (e.g. useWindowWidth, useDebounce)
  • check other built-in Hooks at React docs

There are two very simple rules if you want to use hooks:

  • Only call Hooks at the top level. Don't call Hooks inside loops, conditions or nested functions. This will preserve the state of the Hook between multiple states and useEffect.
  • The second rule of Hooks is only call Hooks from react functions. So, you can call Hooks on functional components, or from custom Hooks. This will ensure that all stateful logic in a component is clearly visible for its source code.