4.4 React Hooks

Watch the video course

Overview

What you'll learn:

  • Intro to hooks
  • Difference between hooks and functions
  • Restrictions on hooks

React Hooks

It’s fun to create animations with the useAnimation function. However, its name is fairly strange. Why do we call it "useAnimation" and not "createAnimation"?

Furthermore, we also used something in the past with the same naming pattern.

useCycle, the function we used to make the toggle.

Do they have anything in common?

Yes, that’s the correct question to ask! They are special functions in React, called React hooks.

Hooks as a relatively new concept in React

Hooks were just released in the first half of 2019 but it took the React community by storm. Initially, people were skeptical and debated about it, but soon everybody started using hooks.

The Framer team quickly joined those who embraced hooks. If you were an early user of Framer X, you probably know that the Framer API changed dramatically, hooks being the major reasons.

In the new API, there are several hooks that address different aspects of prototyping. On the API, if you click on "Utilities", you'll see many functions that begin with "use".

utilities on framer API

We’ll study them in later modules.

Obviously, there’s a lot to learn about Hooks. There are entire courses dedicated to them such as this: React Hooks

But for our purposes, we'll learn about them little by little.

At this point, let’s just think of hooks as a way for a React component to access some extended functionality from React.

We learned about the useAnimation hook, which allows our component to control animations and the useCycle hook which allows us to toggle through different animation states.

Hooks vs functions

Most of the time, hooks are fairly straightforward. Since they are just functions, we can call them in the same way as we call other functions.

Add a pair of parentheses after its name, provide parameters as needed, store its return value into a variable, and so on.

However, if hooks are just functions, why is there such a big deal? Why do we need the extra specification of "hooks" and the naming convention of "use"?

There are some special aspects and restrictions when using hooks. The React team wouldn't create these conventions randomly!

Hook restrictions

First of all, a hook can only be called from within a React component. To illustrate, if we call it above App, we’ll get an Invariant Violation error due to an "Invalid hook call".

useAnimation()

function App() {
  let cloudsAnim = useAnimation()
  let sunAnim = useAnimation()
  let bgAnim = useAnimation()
  ...
}
hook error

There’s another kind of React component called class. Inside a class, we also can't use hooks. Hooks only work inside components that are defined as functions.

The second restriction is the cause of most errors if you are not paying attention. We can only call hooks at the top level of the component.

This means we cannot put it inside another function defined in the component like this.

function App(){
  ...
  <Frame
  ...
  onMouseMove={
    function(event){
      useAnimation()
      ...
    }
  }
  >
  </Frame>
}

We also can't put a hook inside an if statement or a loop.

function App() {
  let birdAnim = useAnimation()
  let cloudsAnim = useAnimation()
  let sunAnim = useAnimation()
  let bgAnim = useAnimation()

  if (window.innerWidth > 100) {
    useAnimation()
  }
}

Looking into our problems console,

conditional error

Stealing a joke from Ryan Florence, "Hooks are great and we love them. But we have to love them unconditionally."

Conclusion

Alright, that’s the gist of what hooks are. Even though it wasn't much, it hopefully should be enough for us to get going. We’ll revisit hooks in a later module.