React - pytanie o dane z json

Cześć, uczę się Reacta i mam pytanie odnośnie przechowywania danych(nie wiem czy to poprawne określenie) z pliku json.

Jak poprawnie używać danych z json? Czy wystarczy zaimportować plik i używać danych od razu czy powinienem przypisać te dane do stanu? Poniżej kilka przykładów o co mi chodzi:

1. Używam danych z importu

import data from "./data.json";

const MyComponent = () => {
   return (
    <>
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
    <ul>
      {data.filter(item => item.name === "Mark").map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
    </>
  );
}

2. Przypisuje dane do stanu

import data from "./data.json";

const MyComponent = () => {
  const [users, setUsers] = useState(data);
  return (
    <>
    <ul>
      {users.map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
    <ul>
      {users.filter(item => item.name === "Mark").map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
    </>
  );
}

3. Przypisuje dane do stanu dopiero w useEffect

import data from "./data.json";

const MyComponent = () => {
  const [users, setUsers] = useState([]);
  useEffect( () => {
    setUsers(data)
  })
  return (
    <>
    <ul>
      {users.map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
    <ul>
      {users.filter(item => item.name === "Mark").map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
    </>
  );
}

4. Przypisuje dane do stanu w useEffect i przefiltrowane dane też dodaję do stanu

import data from "./data.json";

const MyComponent = () => {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState([])
  useEffect( () => {
    setUsers(data)
    setName( () => (
      users.filter(item => item.name === "Mark")
    ))
  })
  return (
    <>
    <ul>
      {users.map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
    <ul>
      {name.map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
    </>
  );
}

Każdy z tych sposobów działa, ale zastanawiam się czy ma znaczenie w jaki sposób to zrobię. Może jeszcze inaczej? Będę wdzięczny za pomoc

importując te dane, masz je. Nie musisz ich wpisywać do state-u. Nie masz potrzeby

W normalnym przypadku z plików się nie wczytuje danych tylko z backendu, a to wymaga wpisania danych gdzieś

fetch('/posts/').then( data => setPosts(data))

bo w sytuacji wyżej te dane, będą dostępne tylko w funkcji callbakowej.