React: useCallback mengembalikan tidak terdefinisi ketika komponen dirender di sisi server

Dibuat pada 15 Nov 2018 · 4Komentar · Sumber: facebook/react

Apakah Anda ingin meminta fitur atau melaporkan bug ?

Bug.

Apa perilaku saat ini?

React.useCallback mengembalikan undefined ketika komponen dirender di sisi server.

Jika perilaku saat ini adalah bug, berikan langkah-langkah untuk mereproduksi dan jika mungkin demo minimal dari masalah tersebut. Tempel tautan ke contoh JSFiddle (https://jsfiddle.net/Luktwrdm/) atau CodeSandbox (https://codesandbox.io/s/new) Anda di bawah ini:

Bug ini dapat direproduksi dengan membuat komponen React menggunakan useCallback . Mencatat nilai pengembalian di server menghasilkan undefined sementara itu mengembalikan fungsi dengan benar di browser.

Anda dapat mengamati bug ini di CodeSandbox ini: https://codesandbox.io/s/r557kww6wn Aplikasi ini dirender dengan benar ke bug string melihat konsol, Anda akan melihat bahwa nilai kembalian useCallback adalah undefined .

Berikut adalah aplikasi yang sama persis tetapi dirender pada klien: https://codesandbox.io/s/xvwv797pxz Fungsi ini dicatat dengan benar ke konsol.

Apa perilaku yang diharapkan?

React.useCallback harus mengembalikan panggilan balik memo, bukan undefined .

Versi React yang mana, dan browser/OS mana yang terpengaruh oleh masalah ini?

bereaksi: 16.7.0-alpha.2
reaksi-dom: 16.7.0-alpha.2

Hooks Bug

Sumber

Zhouzi

Komentar yang paling membantu

Saya percaya ini adalah bug; komentar kode itu salah. Pemahaman saya adalah benar menggunakan useCallback untuk membuat panggilan balik fase.

sophiebits pada 17 Nov 2018

👍3

Semua 4 komentar

Ini adalah perilaku yang disengaja.

Panggilan balik tidak dijalankan di lingkungan server.

Saya berasumsi bahwa alasannya adalah karena panggilan balik untuk penggunaan dengan event handler seperti onClick , yang tidak berarti selama SSR, React tidak benar-benar perlu melacaknya, membebaskan sumber daya yang akan digunakan tidak perlu dengan melacak kait yang tidak akan pernah digunakan.

Jangan khawatir, saat rehidrasi, panggilan balik akan ada di sana.

Tapi, bolehkah saya bertanya apa sebenarnya yang Anda coba lakukan?

arianon pada 15 Nov 2018

Terima kasih @arianon Saya mengikuti saran redux-react-hook untuk menggunakan useCallback dengan useMappedState mereka. Secara konseptual, fungsi yang saya memoisasi sebenarnya bukan panggilan balik. Saya tidak memperhatikan hal itu pada awalnya karena istilah tersebut cenderung digunakan dalam berbagai konteks. Juga, dokumentasi menyebutkan bahwa:

useCallback(fn, inputs) setara dengan useMemo(() => fn, inputs) .

Saya akan membuka masalah di repositori dokumen untuk menyarankan pembaruan Terima kasih lagi!

Zhouzi pada 16 Nov 2018

Saya percaya ini adalah bug; komentar kode itu salah. Pemahaman saya adalah benar menggunakan useCallback untuk membuat panggilan balik fase.

sophiebits pada 17 Nov 2018

👍3

AFAICT satu-satunya hal yang tidak boleh dijalankan di sisi server adalah Efek dan inisialisasi atribut ref. UseCallback yang berfungsi penting untuk, misalnya, pola HOC prop render, yang akan tetap ada di ekosistem untuk waktu yang lama.