React - Is it fetching from server every time that I revisit the page a good practice?

I'm wondering if making a fetch on a useEffect is a good practice or it is actually a beginner's mistake. As far as I understand, the state dismounts when the url is changed, so in the example, the variable data should be anew empty (set to null) variable, is that right?

(Below code being an skeleton example of mine, for this post's questions purposes).

import React, { useState, useEffect } from 'react';
    
    function MyComponent() {
      const [data, setData] = useState(null);
    
      useEffect(() => {
        fetchData();
      }, []);
    
      const fetchData = async () => {
        const response = await fetch('https://myserver.com/data');
        const json = await response.json();
        setData(json);
      };
    
      return (
        <div>
          {data ? (
            <ul>
              {data.map((item) => (
                <li key={item.id}>{item.name}</li>
              ))}
            </ul>
          ) : (
            <p>Loading...</p>
          )}
        </div>
      );
    }

Should I try to store all the data locally? Or is it normal to make constant calls to a server? Should be React.memo involved here in some way?

This is very opinionated, that is why your question is being downvoted. That being said here is my take:

It is not "bad practice" in the sense that yes, there are "more advanced" (not necessarily better) ways to architecture your code, but if you do not fetch information to feed to your live, ever-changing website then how exactly do you intend to keep it dynamic for your users?

What could you do to improve your code ?

First, if you have "static" data like an user's id & name, once said user has logged in then you probably don't need to fetch those values every single time you need to make a call or display them again.You can simply assume that as long as an user is logged and requests are made with a valid token for that user then saving those information temporarily in a React.context that you can then provide to your components is probably a good idea.

Doing that, you can also pre-fetch any relevant data from your server right after login. It is a shared philosophy that unecessary fetch should be avoided as they often slow down your application as you are waiting for them to update your UI.

In most cases you will usually fetch from the same data server which means you could, as an exemple, start by wrapping your fetch calls into it's own script file (or multiple files under the same folder dedicated to those).
That would allow you to have a single source of fetch calls, meaning any changes required as your app grows larger will always come from the same place, debugging would arguably be much easier aswell, and it would remove unecessary clutter from your components rendering logic.

Separating communication (fetch, sockets, etc), rendering, and static data is something I, personnally, find helpfull when developping large applications. It is not always true, and again, very opinionated.

I hope this helps, and i didn't make any major mistakes be free to correct me otherwise.