componentDidMount....Axios 的替代品？

Question

I have recently done a few API tests for a new job. Just receiving data and passing it through. Although I have completed the tasks and it works functionally, the people I walk through it with are not huge fans of componentDidMount.

They do not suggest an alternative? Anyone know why this could be? Is it due to it being async?

Answer 1

The new modern way to do it is: useEffect

First some code (from the docs):

// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
  // Update the document title using the browser API
  document.title = `You clicked ${count} times`;
});

At the end-of-the-day, the componentDidMount purpose is to execute something(the side effect) because the component was mounted(the reason or event).

So you can specify array of dependencies (or causes) for re-running like so:

useEffect(() => {
  // ....
}, [someVar]);

so if someVar changed, the function will re-run.

Special use cases are; omitting this argument, will cause it to run once, on-mount event. and specify empty array will cause it to run on each re-render.

For the componentWillUnmount :

Just return a function from the inner function like so:

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  // Specify how to clean up after this effect:
  return function cleanup() {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
});