At what stage of the lifecycle is it best to make a request to the backend?

The best practice is to make a request to the backend when the component is already mounted and ready to display data, that is, in the lifecycle method called after mounting. In React, for example, this is componentDidMount for class components or the useEffect hook with an empty dependency array for functional components.

This approach prevents requests before the component is ready to operate and ensures that data is loaded and displayed correctly.

An example with React and the useEffect hook:

import React, { useEffect, useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []); // empty array means the effect runs once after mounting

  if (!user) return <div>Loading...</div>;
  return <div>Hello, {user.name}!</div>;
}