สวัสดีคร่าบบ วันนี้จะมาอธิบายกับข้อสงสัยเล็กๆน้อยๆที่ผมได้สงสัยและได้ไปศึกษามาเกี่ยวกับ useEffect กับ useMemo ซึ่งทั้งสองตัวเป็น Hooks ของ react นั่นเองง..
ใครที่เคยใช้ แต่ยังไม่เคลียกับการใช้งานของสองเจ้าตัวนี้ว่ามันแตกต่างกันอย่างไร ทำไมมันทำงานเหมือนกัน ถ้าทำงานเหมือนกันทาง react จะ provide มาให้เราทำไม? ป่ะเราไปเริ่มกันเลยดีกว่า ( คุณต้องคุ้นเคยกับ Hook ตัวพื้นฐานอย่าง useState ก่อนนะจ้ะ )
useEffect โดยปกติแล้ว จะใช้เหมือนกับ componentDidmount ใน class component ที่เมื่อ render แล้วจึงจะค่อยทริกเกอร์มาทำงานนั่นเอง แล้วว.. ปัญหาคืออะไรล่ะ ปัญหามันก็คือเราจะมีการเรนเดอร์เพิ่มขึ้นมาทันทีหนึ่งครั้งหากใน useEffect มีการ setState เกิดขึ้น อ้าวว.. แล้วทำไมต้องมี setState ใน useEffect หละ หลายๆครั้งเราจำเป็นต้อง setState ใน useEffect เพื่อให้ state ใหม่ ถูก render แสดงออกมาแสดงนั่นเอง ยกตัวอย่างเช่น
const [sampleValue,setSampleValue] = useState(0)
useEffect(()=>{setSampleValue(1) },[])
return(<div>{sampleValue}</div>)
หากเอาไปรันดูแล้วเราจะเห็นว่า sampleValue มันเท่ากับ 1 ทันที แต่ในความจริงแล้วตัวฟังชันท์มัน render ค่าของ sampleValue เท่ากับ 0 มาก่อน แล้วทำงาน useEffect ข้างในมี setState อีกที จึง render ค่าใหม่พร้อมกับ ค่า 1 นั่นเองง หมายความว่ามัน เรนเดอร์ สองครั้งเลยแหนะ ถ้าหากใน ฟังชันท์เรามีการเรนเดอร์และคำนวณเยอะๆ เราจะยอมเสียเรนเดอร์ฟรีๆไปทำไมล่ะ จึงมีพระเอกมาช่วยนั่นก็คือ useMemo นั่นเอง
useMemo จะทำงานก่อนการ render นั่นหมายความว่า เราไม่ต้องมีการเรนเดอร์ซ้ำ อีกทั้งยังไม่ต้องใช้ state มาช่วยในการเรนเดอร์ค่าๆนั้นอีกครั้งด้วย จากตัวอย่างข้างบนก็จะกลายเป็น
let sampleValue = 0
useMemo(()=>{sampleValue = 1 },[])
return(<div>{sampleValue}</div>)
ฟังชันท์นี้จะมีการ render เพียงครั้งเดียวเท่านั้น และนี่ก็เป็นตัวอย่างพาให้เข้าใจ useMemo ง่ายๆ จริงๆยังมีประโยชน์ที่น่านำไปใช้กับงานจริงๆอีกหลายอย่างมาก ไว้เจอกันใหม่ค่าบ