Here are examples for the most common lifecycles:

componentDidMount

Pass an empty array as the second argument to useEffect() to run only the callback on mount only.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, []); // Pass an empty array to run only callback on mount only.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

componentDidUpdate (loose)

By passing just the single argument into useEffect, it will run after every render. This is a loose equivalent because there's a slight difference here being componentDidUpdate will not run after the first render but this hooks version runs after every render.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }); // No second argument, so run after every render.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

componentDidUpdate (strict)

The difference of this example with the example above is that the callback here would not run on initial render, strictly emulating the semantics of componentDidUpdate. This answer is by Tholle, all credit goes to him.

function Example() {
  const [count, setCount] = useState(0);

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log('componentDidUpdate');
  });

  return (
    <div>
      <p>componentDidUpdate: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

componentWillUnmount

Return a callback in useEffect's callback argument and it will be called before unmounting.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Return a callback in useEffect and it will be called before unmounting.
    return () => {
      console.log('componentWillUnmount!');
    };
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

shouldComponentUpdate

You can already achieve this on the component level using React.PureComponent or React.memo. For preventing rerendering of the child components, this example is taken from React docs:

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

getDerivedStateFromProps

Again, taken from the React docs

function ScrollView({row}) {
  let [isScrollingDown, setIsScrollingDown] = useState(false);
  let [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // Row changed since last render. Update isScrollingDown.
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
}

getSnapshotBeforeUpdate

No equivalent for hooks yet.

componentDidCatch

No equivalent for hooks yet.

In React classes you had lifecycle functions and state to do things but you didn't have them in functional components. The React defs came up with hooks where you can simplify your code and re use your code better by bundling up certain functionality in a custom hook. This was previously not possible with class components. Even with mix-ins like used in Vue they now have composition api that works similarly to hooks.

Let's say you want to have counter functionality that will log when a counter changes, have an up and down function and a counter value.

In a class you need to maintain this.state.counter that you change with this.up and this.down so you could implement this in a Counter class that extends React.Component or React.PureComponent and have a component that uses a counter extends Counter but then that component can still just have one counter. In hooks you can implement a counter with a custom hook and have multiple counters in one component.

const {
  useState,
  useEffect,
  useCallback,
  useRef,
  memo,
} = React;

//hooks, also custom hooks always start with "use"
const useCounter = (name, initialValue = 1) => {
  //local counter value and function to change it
  const [counter, setCounter] = useState(initialValue);
  //ref created on mount with previous counter value
  const countRef = useRef(initialValue);
  //up and down functions created with useCallback so they
  //  will be created on mount and never change
  const up = useCallback(
    () => setCounter((c) => c + 1),
    []
  );
  const down = useCallback(
    () => setCounter((c) => c - 1),
    []
  );
  //effect that will log when counter changes
  useEffect(() => {
    if (countRef.current !== counter) {
      console.log(`counter ${name} changed to`, counter);
      countRef.current = counter;
    }
  }, [counter, name]);
  //return up, down and counter
  return { up, down, counter };
};
//using memo makes UP2 a pure component so it'll not re
//  render since up is created with useCallback and is
//  not re created therefore the props passed to UP2 
//  don't change
const UP2 = memo(function UP2({ up, name }) {
  console.log(`UP2 for ${name} will only render once`);
  return (
    <button
      onClick={() => {
        //state updates are batched in synchronous
        //  event handlers so "chaged to" will log
        //  only once
        up();
        up();
      }}
    >
      +2
    </button>
  );
});

const App = () => {
  //first counter
  const {
    up: up1,
    down: down1,
    counter: counter1,
  } = useCounter('counter one');
  //second counter
  const {
    up: up2,
    down: down2,
    counter: counter2,
  } = useCounter('counter two', 2);
  return (
    <div>
      <div>
        <button onClick={up1}>UP</button>
        <button onClick={down1}>Down</button>
        <UP2 up={up1} name={'counter one'} />
        {counter1}
      </div>
      <div>
        <button onClick={up2}>UP</button>
        <button onClick={down2}>Down</button>
        <UP2 up={up2} name={'counter two'} />
        {counter2}
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>