MyRenderingComponent.jsx

export const HelloApiContext = React.createContext({
  values: { name: "" },
});

export function MyHelloApiProvider({ children }) {
  const [serverData, setServerData] = useState({ name: "" });
  const loadData = useCallback(() => {
    fetch("https://brunosabot.dev/api/hello/")
      .then((result) => result.json())
      .then((data) => setServerData(data));
  }, []);
  useEffect(loadData, []);
  return (
    <HelloApiContext.Provider value={{ values: serverData }}>
      {children}
    </HelloApiContext.Provider>
  );
}

export function MyRenderingComponent() {
  const { values } = useContext(HelloApiContext);
  return <div>{values.name}</div>;
}

/*
Usage:
<MyHelloApiProvider>
  <MyRenderingComponent />
</MyHelloApiProvider>
*/