React Fundamentals (or Vue/Angular depending on expertise) Questions

import React, { useEffect, useRef, useState } from "react";

export function DataFetcher({ endpoint, children }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // track mounted state to avoid state updates after unmount
  const mountedRef = useRef(true);

  useEffect(() => {
    mountedRef.current = true;
    const controller = new AbortController();
    const signal = controller.signal;

    async function load() {
      setLoading(true);
      setError(null);
      try {
        const res = await fetch(endpoint, { signal });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const json = await res.json();
        if (mountedRef.current) setData(json);
      } catch (err) {
        if (err.name === "AbortError") {
          // fetch was cancelled; no state update
        } else if (mountedRef.current) {
          setError(err);
          setData(null);
        }
      } finally {
        if (mountedRef.current) setLoading(false);
      }
    }

    load();

    // cleanup: cancel fetch and mark unmounted on cleanup
    return () => {
      mountedRef.current = false;
      controller.abort();
    };
  }, [endpoint]);

  return children({ data, loading, error });
}

<DataFetcher endpoint="/api/items">
  {({ data, loading, error }) => {
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
  }}
</DataFetcher>

// webpack.config.js (remote)
new ModuleFederationPlugin({
  name: 'catalog',
  filename: 'remoteEntry.js',
  exposes: { './CatalogApp': './src/bootstrap' },
  shared: {
    react: { singleton: true, requiredVersion: '^18.0.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
    'design-system': { singleton: true, eager: false, requiredVersion: '^2.5.0' }
  }
});

// Parent.js
function Parent() {
  const [query, setQuery] = useState('');
  const results = useMemo(()=> filterItems(items, query), [items, query]);
  return (
    <>
      <Filter value={query} onChange={setQuery} />
      <Results items={results} />
    </>
  );
}

// Filter.js
function Filter({ value, onChange }) {
  return <input value={value} onChange={e=>onChange(e.target.value)} />;
}

// Results.js
const Results = React.memo(function Results({ items }) {
  return items.map(i=> <div key={i.id}>{i.name}</div>);
});

// measure hook
useLayoutEffect(() => {
  const h = node.getBoundingClientRect().height;
  heightCache.update(item.id, h);
}, [item.id, contentHash]);