受け取ったデータのリロードをしたいとき
親から子コンポーネントの 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>
`
}