React で useEffect の中で API からデータを fetch してるコンポーネント
受け取ったデータのリロードをしたいとき

親から子コンポーネントの state をリセットするときの key のような感じで useEffect を再実行させるために refresh_id を用意して useEffect の比較条件に設定
リロードしたいときに この参照を更新

const App () => {
const [refresh_id, setRefreshId] = useState({})
const [data, setData] = useState(null)
const refresh = () => setRefreshId({})

useEffect(() => {
fetch("/foo/bar").then(e => e.json()).then(data => setData(data))
}, [refresh_id])

return html`
<div>${data}</div>
<button onclick=${refresh}>Refresh</button>
`
}

data 自体を useEffect の条件にしてリロードしたいときに null に変更する
fetch 後のセット時に再帰実行しないように data をセットしたときには useEffect 内の処理をしないように条件分岐

const App () => {
const [data, setData] = useState(null)

useEffect(() => {
if (data !== null) return
fetch("/foo/bar").then(e => e.json()).then(data => setData(data))
}, [data])

return html`
<div>${data}</div>
<button onclick=${() => setData(null)}>Refresh</button>
`
}

そもそも useEffect 通す必要がなかった
リロードしたいときに直接 useEffect と同じように fetch して結果をセットする

const App () => {
const [data, setData] = useState(null)

const load = () => {
fetch("/foo/bar").then(e => e.json()).then(data => setData(data))
}

useEffect(load, [])

return html`
<div>${data}</div>
<button onclick=${load}>Refresh</button>
`
}