React Hooks

By: AustinRJ

But who are you?

Javascript - 2 years

 Mountain Activities - 3 years

Attempting to be Creative - 32 years

Keeping up with my dog - 9 months

Tech Writer - 2 months

Learning objectives

• Look at the pitfalls in React
• Basics of hooks
• Familiarization with basic hooks
• Knowledge of the rules surrounding hooks
• Understanding custom hooks
• A look at an example - custom hooks
• If there's time - useReducer

Pitfalls

• Reusing logic - HOC + Render Props
• Component Logic - separated + complex
• Classes - Fear + Confusion

Hooks...

• Are just functions - with a little destructuring
• Add functionality to functional components
• Get rid of classes - back to javascript
• Allow reuse of stateful logic - useEffect / custom hooks

 useState

• Adds local state
• State is preserved 

import React from 'react';
class OneTimeButtonHookless extends React.Component {
  state = {
    clicked: false
  }
  handleClick = () => {
    this.setState({ clicked: true });
  }
  render() {
    return (
      <button
        onClick={this.handleClick}
        disabled={this.state.clicked}
      >
        You Have One Chance to Click... without hooks
      </button>
    );
  }
}

Let me in your life(cycle)

import React, { useState } from 'react';

const OneChanceButtonHooks =(props)=> {
  const [clicked, setClicked] = useState(false);

  const doClick = () =>

    setClicked(true); 

 

  return (
    <div>
      <button
        onClick={clicked ? undefined : doClick}
        disabled={clicked} >
      You Have One Chance to Click... with hooks
      </button>
    </div>
  );
}

import React, { useState } from 'react';
const OneChanceButtonHooks =(props)=> {
  const [clicked, setClicked] = useState(false);

  const [disabled, setDisabled] = useState(false);

  const doClick = () => {

    setClicked(true); 
    setDisabled(true);

} 

  return (
    <div>
      <button
        onClick={clicked ? undefined : doClick}
        disabled={clicked} >
      You Have One Chance to Click.. with hooks
      </button>
    </div>
  );
}

 useEffect

• Adds effects to functional components
• Combines lifecycle methods
  • helps co-locate state
  • mount, update, unmount
• Skip effects with second argument

 

 

(code example)

componentDidMount() {

  document.title = `You repeated yourself ${this.state.count} times`;
}

 

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    document.title = `You repeated yourself ${this.state.count} times`;
  }
}

[count] is optional

 

  useEffect(() => {  
    document.title = `You clicked ${count} times`;
  }, [count]); // Only re-run the effect if count changes

 

I'm not done...
 
but and clarifications?

 

(rules are next)

 

The Rules 

• Hooks must be called at the top level

• Hooks cannot be called in conditionals or loops

• Can not be used in class components

• Naming conventions for custom hooks

  • usePatience

You Can Do This

// This is good!
function ComponentWithHooks() {
// top-level!
  const [age, setAge] = useState(32);
  const [month, setMonth] = useState('March');
  const [todos, setTodos] = useState([{ 
    text: ['Eat pie'],

    importance: 'Very Important'
  }]);
  return (
//...
  )
}

You Can't Do This

    const [DNAMatch, setDNAMatch] = useState(false)

    if (name) {
      const [name, setName] = useState(name) // DOH, NO!

      setDNAMatch(true)
      useEffect(function persistFamily() { .  // AGAIN, NO!
        localStorage.setItem('dad', name);
      }, [name]);
    }

You Can Do This

  const [DNAMatch, setDNAMatch] = useState(false)

  const [name, setName] = useState(name)

  
  useEffect(function persistFamily() {

    if (name) {
       setDNAMatch(true)
      localStorage.setItem('dad', name);
    }
  }, [name]);

Custom Hooks

• Combines hooks into a reusable function

• Replaces most cases of HOC and render props

• Each custom hook call has independent state

• useYourImagination

(go to media query project)

Other Hooks

 

• useContext

• useRef

• useReducer

 

Ten hooks total, check them out! 

 

(go to slides project, if they'd like... )

Conclusion

 

Hooks are awesome

It will change react forever

I can't wait to see what happens,

especially with third party Libraries

 

Ten hooks total, check them out! 

 

(go to slides project, if they'd like... )