React useContext dengan "setState"
Saya baru-baru ini mulai menggunakan Api Reaksi Konteks dengan useContext Hook. Saya telah mengamati bahwa ketika kita memiliki variabel state yaitu const someState = useState (state, setState), beberapa pengembang meneruskan setSate secara langsung dalam nilai provider dan kemudian memanggilnya dalam komponen anak-anak. Apakah itu praktik yang baik?
Jika Anda tidak menggunakan konteks, Anda harus membuat penangan untuk "mengakses" setState dalam komponen anak. Saya masih menggunakan fungsi penangan dan meneruskannya ke nilai penyedia, untuk mengimpornya dari konteks pada anak-anak.
Apakah meneruskan setState dalam konteks merupakan praktik yang baik? Saya masih ragu karena biasanya Anda tidak dapat mengirimkan setState langsung ke dalam komponen. Apakah ada perbedaan kinerja atau kekurangan lainnya yang harus saya pertimbangkan?
Terima kasih.
Jawaban
Jika saya mengerti dengan benar, perbedaannya adalah bahwa di satu sisi status diatur dari komponen induk dan di sisi lain status diatur dari komponen anak. Terkadang orang melakukannya dengan cara itu untuk menghindari rendering loop dengan mengubah status. Seharusnya tidak ada kekurangan, tapi menggunakan fungsi handler adalah cara yang biasa dilakukan.
Sunting: Saya sebenarnya berpikir saya salah, tapi saya tidak yakin. Balasan saya berlaku untuk kasus ini jika Anda menulis penyedia Anda sendiri yang memiliki status. Jika Anda hanya menggunakan penyedia default yang menyediakan penyetel, saya setuju dengan balasan Amel.
Saya pribadi tidak akan melakukannya, tetapi itu lebih merupakan sebuah opini. Namun, seperti biasa, itu sangat tergantung pada tujuan apa yang ingin Anda capai.
Aspek positif dari melakukannya adalah, penyetel status yang diberikan oleh useState selalu tetap sama untuk setiap perender ulang. Jika Anda meneruskan nilai khusus, Anda harus menghindarinya terlalu sering berubah karena setiap komponen yang mendengarkan perubahan menggunakan useContext akan merender.
Saya masih lebih suka meneruskan objek khusus (misalnya berasal dari useMemo untuk menghindari perenderan yang tidak perlu) dengan callback untuk menyetel status. Lebih mudah untuk memperpanjang jika Anda ingin menyediakan lebih banyak barang di masa mendatang.
Sesuatu seperti ini (contoh yang sangat sederhana, yang tentunya tidak masuk akal seperti ini, ini hanya untuk pemahaman):
function MyProvider({children}) {
const [state, setState] = useState(0);
const provided = useMemo(() => ({
value: state,
setValue: (value) => setState(value)
}, [value]);
return <MyContext.Provider value={provided}>{children}</MyContext.Provider>;
}
Akan lebih mudah untuk memperluas tanpa mengubah kode di mana pun konteksnya digunakan. Namun, saya masih berpikir tidak ada yang buruk dalam mengoper hanya setter, jika itu yang ingin Anda capai.