useEffect()

TLDR

from this

class User extends React.Component {
  state = { user: null } // 1. keep track of state

  fetch() {
    fetchSomething(this.props.query).then(res => {
      this.setState({ user: res.result }) // 2. async fetching and setting state
    })
  }

  componentDidMount() {
    this.fetch() // 3. component setup
  }

  componentDidUpdate(prevProps) {
    if (this.props.query !== prevProps.query) {
      if (!this.__isUnMounted) this.fetch() // 4. component listen to change (diffing)
    }
  }

  componentWillUnmount() {
    this.__isUnMounted = true // 5. component teardown
  }

  render() {
    return this.props.children(this.state.user) // 6. component output
  }
}

const AppComponent = ({ query }) => {
  return (
    <User query={query}>
      {user => {
        return <p>{JSON.stringify(user)}</p>
      }}
    </User>
  )
}

to this

const useUser = query => {
  const [user, setUser] = useState(null) // 1. keep track of state

  useEffect(
    () => {
      let current = true // 3. component setup (useEffect)
      fetchSomething(query).then(res => {
        if (current) setUser(res) // 2. async fetching and setting state
      })
      return () => {
        current = false // 5. component teardown
      }
    },
    [query]
  ) // 4. component listen to change (dependency array diffed by react)

  return user // 6. component output
}

const AppHooks = ({ query }) => {
  const user = useUser(query)
  return <p>{JSON.stringify(user)}</p>
}

also read

more complete post