class-to-hooks.md

import React from 'react';

class ComponentWithState extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
            name: '',
        }
    }

		onButtonClicked() {
      this.setState({
        counter: this.state.counter + 1
      })
    }

    render() {
        return (
            <div>
                <button onClick={this.onButtonClicked}>Clicked {this.state.counter} times</button>
                <h1>My name is {this.state.name}</h1>
								<p>Fruit passed in as prop {this.props.fruit}</p>
            </div>
        )
    }
}

export default ComponentWithState;

1. Create function with the same name as class, and take props in as the only parameter

function ComponentWithState(props) {

}

2. Copy return portion of the "render" function in the class into the body of the function

function ComponentWithState(props) {
	return (
      <div>
          <button onClick={this.onButtonClicked}>Clicked {this.state.counter} times</button>
          <h1>My name is {this.state.name}</h1>
					<p>Fruit passed in as prop {this.props.fruit}</p>
      </div>
  )
}

3. For every property inside the class constructor this.state , create an equivalent useState. Make sure anywhere that references e.g. this.state.counter you swap out with the new state variable which is just counter

 function ComponentWithState(props) {
	const [counter, setCounter] = React.useState(0);
	const [name, setName] = React.useState('');
	return (
      <div>
          <button onClick={this.onButtonClicked}>Clicked {counter} times</button>
          <h1>My name is {name}</h1>
					<p>Fruit passed in as prop {this.props.fruit}</p>
      </div>
  )
}

4. Find any instances of this.props and make it just props

 function ComponentWithState(props) {
	const [counter, setCounter] = React.useState(0);
	const [name, setName] = React.useState('');
	return (
      <div>
          <button onClick={this.onButtonClicked}>Clicked {counter} times</button>
          <h1>My name is {name}</h1>
					<p>Fruit passed in as prop {props.fruit}</p>
      </div>
  )
}

5. Replace any event handlers (e.g. onChange or onClick) functions into functions defined inside our component. Also replace any instances of this.setState({}) with the appropriate setX variable we've created using useState . Make sure to then update the onClick={this.onButtonClicked} to just be onClick={onButtonClicked}

function ComponentWithState(props) {
	const [counter, setCounter] = React.useState(0);
	const [name, setName] = React.useState('');

	function onButtonClicked() {
		setCounter(counter + 1)
  }

	return (
      <div>
          <button onClick={onButtonClicked}>Clicked {counter} times</button>
          <h1>My name is {name}</h1>
					<p>Fruit passed in as prop {props.fruit}</p>
      </div>
  )
}