Stories by Prap K. Vongcharee on Medium

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GK9vbx6L6IrrSRPSpGW_5g.png"></figure>สวัสดีครับ นี่ก็เป็นบทความที่ 2 แล้วนะครับของซีรี่ย์นี้ บทความนี้จะเป็นคิวของ useEffect กันต่อเลย
สำหรับคนที่ยังไม่ได้อ่าน useState ของ part ที่แล้ว <a href="https://blog.foxbith.com/react-hooks-101-b646753e231f">คลิกที่นี่</a> ถ้าพร้อมแล้วเรามาเริ่มกันเลยครับ
<h4>useEffect คืออะไร?</h4>
useEffect คือ hook ที่ดำเนินการตาม side effects ต่างๆ (life cycle) ของ React จะอธิบายได้ง่ายๆ ตามภาพข้างล่าง
<figure><img alt="" src="https://cdn-images-1.medium.com/max/542/1*q_rLXvf7Sj9PW_vFUWFHmw.png"><figcaption><a href="https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/">cr.</a></figcaption></figure><h4>Life cycle ของ React จะมีช่วงชีวิตดังต่อไปนี้ พร้อมคำอธิบายแต่ละช่วงเวลา</h4>
<ol>
<li>Initialization // ตอนเริ่ม render component</li>
<li>Mounting // ตอน component render เสร็จ</li>
<li>Updation // ตอนค่า State มีการอัพเดท</li>
<li>Unmonting // ตอน destroy component หรือ ออกจากหน้า component นั้นๆ</li>
</ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6ztBjI3q6sINHGCLD_Xp8Q.png"><figcaption>ภาพเปรียบเทียบระหว่างการเขียนแบบ class และ hook จะเห็นได้ว่า useEffect ตัวเดียว สามารถจัดการได้หมดทุกช่วงชีวิต ของ component</figcaption></figure>มาเริ่มเขียนโค้ดกันเลยดีกว่า
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BPX6QQQAe9AUEaY019AF_Q.png"></figure>ตามภาพ จังหวะ initialization ผมบอก component นี้ให้ set initial state เป็น count มีค่า = 0 และพอตอนที่ component mount เสร็จแล้วให้มีค่าเท่ากับ 1
จริงๆแล้วเจ้าตัว useEffect แบบนี้คือจะทำทุกๆครั้งเมื่อ state มีการอัพเดท หรือ component mount เสร็จ
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MPFeshK9juZ6ZY_MTHOcJw.png"></figure>แล้วถ้าผมอยากจะลองอัพเดทค่า state ดูล่ะ แล้วมาดูกันว่าจะเกิดอะไรขึ้น
<figure><img alt="" src="https://cdn-images-1.medium.com/max/800/1*8wuH3b6tun7LtwbbWcxnQQ.jpeg"></figure>ใน log จะเห็นว่าค่า count มีค่าเท่ากับ 2 แล้ว แล้วมันก็มีค่ากลับมาเป็น 1 อีก เพราะว่า ใน useEffect เราเขียนบอกว่า ทุกๆครั้งที่ state มีการอัพเดท value ให้ทำ set ค่า count ให้เป็น 1 นั้นจึงทำให้ count มีค่ากลับมาเป็น 1 อีกครั้ง
และจะทำยังไงล่ะ ถ้าหากต้องการให้ useEffect ทำแค่ครั้งเดียวหลังจาก component mount เสร็จ… ง่ายๆเลยครับ แค่เพิ่ม dependency array ต่อท้าย useEffect
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*44M7dssfC2vxQ8VO2KFz9g.png"></figure>สมมุติว่าผมแค่อยากจะให้ set ค่า count แสดงข้อความบางอย่างครั้งเดียวต่อน component mount เสร็จแค่ครั้งเดียวแล้วไม่อยากให้ทำอะไรอีก
<figure><img alt="" src="https://cdn-images-1.medium.com/max/822/1*6SEImRttO2tlmJ2JQpjX0g.jpeg"><figcaption>จากรูปยังไม่ได้กดปุ่มอะไรเลย</figcaption></figure>พอผมใส่ dependency array เปล่าๆ เข้าไปแล้ว useEffect ตัวแรกจะทำ set count เป็น 1 และ แสดง log แค่ครั้งเดียว แล้วจะไม่ทำอะไรอีกเลย มาลองกดปุ่ม add count กันดีกว่า
<figure><img alt="" src="https://cdn-images-1.medium.com/max/799/1*ng_7p40MxJ2e5Yu_plSD6w.jpeg"></figure>พอผมกด add count useEffect ที่เป็นตัว updating จะทำแค่ตัวเดียว เย้.. setCount ทำแค่ครั้งเดียวแล้ว
ทีนี้ลองมาเพิ่มตัว state อีกหนึ่งตัวกันดีกว่า
<figure><img alt="" src="https://cdn-images-1.medium.com/max/791/1*iEgS2BcAxM7YdtevZj0zNg.jpeg"><figcaption>ในรูปผมกด count1 2 ครั้ง แล้วตามด้วย count2 1 ครั้ง</figcaption></figure>จากในรูปผมเพิ่ม count มาอีกตัว แล้วทุกๆครั้งที่ผมกดอัพเดท state ตัวใดตัวนึง useEffect ที่เป็นตัว updating จะแสดงข้อความของ state ทั้ง 2 ตัวออกมาเลย
แล้วจะทำยังไงดีล่ะ ผมอยากให้แสดงแค่ค่าตัวที่ผมอัพเดทเท่านั้น…
เราแค่ เพิ่ม dependency array แบบตัว useEffect ข้างบนเลย เพียงแต่เพิ่มตัวที่เราจะบอก useEffect นั้นว่าจะทำก็ต่อเมื่อมีค่าค่านี้มีการอัพเดทเท่านั้น
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*X_inI0f9djvGCXaCYb1QWQ.png"></figure>งั้นทีนี้ผมลองแยก useEffect และจะบอกแต่ละตัวว่าจะให้ทำเฉพาะค่า state ตัวนั้นๆอัพเดทเท่านั้น ค่อยให้มันทำตามรูปด้านล่าง
<figure><img alt="" src="https://cdn-images-1.medium.com/max/784/1*1V6T8rO9QSF0JZMgS9GyTQ.jpeg"></figure>ทีนี้พอผมกด add count แต่ละตัว useEffect มันก็จะทำตามค่า state ที่มันได้รับมอบหมายว่าให้ทำเฉพาะค่า state นั้นๆมีการเปลี่ยนแปลง (ในรูปผมเปลี่ยนคำว่า count เป็นดอกไม้ จะได้เห็นชัดๆ)
ต่อมาเป็น life cycle ลำดับสุดท้ายนั้นก็คือ unmounting syntax จะเป็นแบบนี้
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XSuuCR3PSnK3oin0A4Ld5w.png"></figure>คือเราจะเพิ่ม return function เอาไว้ท้ายสุดของ useEffect
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cJDtyee5Wcsd3cixeeHkzw.png"></figure>จากโค้ด ผมจะทำการแสดง component ด้วยเงื่อนไขของตัว showComponent ถ้ามันค่าเป็นอะไรก็แสดง component ตัวนั้น และจะเห็น useEffect ของแต่ละ component ผมเขียนให้มันว่าถ้า unmount แล้วแสดงข้อความก่อนที่มันจะโดน unmount ด้วย
<figure><img alt="" src="https://cdn-images-1.medium.com/max/846/1*1qaOmH6iMrlGkKycl0Hfqg.png"></figure>พอผมกดให้แสดง component 2 เราจะเห็น log ว่ามันแสดงข้อความจาก component 1 ที่มีการทำเมื่อ component 1 โดน unmount
<figure><img alt="" src="https://cdn-images-1.medium.com/max/846/1*jcrs1xUArRj-OUmcD6vh1A.png"></figure>พอกดสลับไปมา useEffect ก็จะแสดงข้อความเมื่อมันได้ทำการ unmount…
use case ของตัว useEffect unmount นี้ ที่ผมคิดออกก็น่าจะเป็นตอนที่ สมมุติผมใช้ component นี่ร่วมกับ redux พอแสดง component นี้แล้วอยากให้ set ค่า redux ไปด้วยที่ใช้เฉพาะใน component นี้ อารมณ์ประมาณ set ค่าใน state แต่ไปใช้ใน redux พอเราใช้ redux set ค่าเสร็จแล้ว เรากำลังจะ unmount จาก component นี้ ก่อนจะ unmount ผมก็จะเขียนว่าให้ clear ค่า redux ที่ผมใช้เฉพาะ component นี้ออก เพื่อที่จะ performace เพราะค่า redux ที่ใช้สำหรับ component นี้จะใช้แค่ที่นี่ พอไป component อื่น หรือ ไป route อื่นๆ ไม่มีความจำเป็นที่จำต้องจำค่านี้ ให้มัน clear ค่าออกไปด้วย เมื่อมัน unmount ประมาณนี้ครับ
<ul>
<li>useState ✅ <a href="https://blog.foxbith.com/react-hooks-101-b646753e231f">ลิงค์</a>
</li>
<li>useEffect ✅</li>
<li>useCallback // Coming soon…</li>
<li>useMemo // Coming soon…</li>
<li>useContext // Coming soon…</li>
<li>Custom hook // Coming soon…</li>
</ul>
จบไปอีกหนึ่งบทเรียนแล้วครับสำหรับ useEffect เป็นยังไงกันบ้าง งงกันบ้างหรือเปล่า555
ถ้าหากผิดพลาดประการใด ขออภัยไว้ ณ ที่นี้ด้วยนะครับ ขอบคุณที่เข้ามาอ่านกันครับ 🙏🙇‍♂️
<blockquote>Ref</blockquote>
<blockquote><a href="https://reactjs.org/docs/hooks-effect.html">https://reactjs.org/docs/hooks-effect.html</a></blockquote>
<blockquote><a href="https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/">https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/</a></blockquote>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9426376fd38" width="1" height="1" alt=""><hr>
<a href="https://medium.com/foxbith/react-hooks-101-part-2-9426376fd38">React Hooks 101 (Part 2)</a> was originally published in <a href="https://medium.com/foxbith">FOXBITH</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

React Hooks 101 (Part 2)

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GK9vbx6L6IrrSRPSpGW_5g.png"></figure>สวัสดีครับ วันนี้ผมจะมาอธิบายการทำงานต่างๆ ของ feature หนึ่งที่เรียกว่า Hook ของ <a href="https://reactjs.org/">React</a> ว่ามันคืออะไร มีอะไรบ้าง แล้วแต่ละอย่างมีหน้าที่บทบาทอย่างไรกับ React
ก่อนที่จะไปรู้จักกับ hooks เรามารู้จักกับ React กันแบบสั้นๆกันก่อนดีกว่าว่ามันคืออะไร ขออนุญาติ <a href="https://www.designil.com/react-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/">บล็อคของพี่คนนี้</a>ในการอธิบายนะครับ
<h3>React คืออะไร ?</h3>
React คือ JavaScript Library ที่ทีม Facebook เป็นคนพัฒนาขึ้นมา และเปิดให้คนทั่วไปนำมาใช้ฟรี ซึ่งเว็บไซต์ในปัจจุบันของ Facebook.com ก็ใช้ React อยู่เช่นกันครับ
สรุปคือ คอนเซปต์ที่เราต้องรู้เพื่อเขียน React หลัก ๆ มีแค่ 3 Concept เท่านั้นเอง
<ol>
<li>
Component — ส่วนต่าง ๆ ในเว็บเราจะมองเป็น Component</li>
<li>
State — ข้อมูลที่อยู่ใน Component แต่ละชิ้น เราเรียกว่า State</li>
<li>
Props — ข้อมูลที่ถูกส่งต่อจาก Component ชั้นบนลงไปชั้นล่าง เราเรียกว่า Props (Properties)</li>
</ol>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/960/1*8pEi6cOAjNjS8nlZg2xJOg.jpeg"><figcaption>ขอบคุณภาพประกอบจาก บล็อคนี้นะครับ : <a href="https://medium.com/@pakawatmange/react-909-props-f8a40e361873">https://medium.com/@pakawatmange/react-909-props-f8a40e361873</a></figcaption></figure>ต่อไปผมจะมาแนะนำ hooks ที่ตัวผมเองนั้นใช้เป็นหลักๆเลยของ feature นี้ของ React
<ul>
<li>useState // ใช้จัดการค่า state ต่างๆของ React</li>
<li>useEffect // ใช้จัดการ side effect ต่างๆ ของ liftcycle ใน component เช่น บางทีเราอยากจะรันโค้ดบางอย่างหลังจากที่มีค่าตัวแปรตัวนึงมีการ update</li>
<li>useCallback // เอาไว้บอก function นั้นว่าควร complie function ตอนไหนบ้าง (Performance)</li>
<li>useMemo // คล้ายกับ useCallback แต่ใช้กับตัวแปร (Performance)</li>
<li>useContext // เอาไว้ส่งข้อมูลข้าม component จากแม่ไปสู่ลูกและหลาน เหลน โหลน โดยไม่ต้องผ่าน props</li>
<li>Custom hook (Highlight) // อันนี้เป็นการเขียน function รูปแบบหนึ่งที่สามารถใช้ hooks ได้</li>
</ul>
<h3>Rules of hooks</h3>
hooks มีกฎอยู่ง่ายๆว่า
<ul>
<li>hooks ต้องใช้กับ function component เท่านั้น</li>
<li>เรียกใช้ hooks ในส่วน top level ของ component ก่อนที่จะมีการ return ใดๆ</li>
<li>ห้ามเรียกใช้ hooks ใน loop, เงื่อนไข, หรือ function ลึกๆ</li>
<li>ไม่สามารถ เรียกใช้ hooks ใน function ธรรมดาของ javascript ได้ แต่เราสามารถใช้ใน custom hooks ได้ (และนี่คือที่มาของ custom hook ซึ่งเดี๋ยวผมจะอธิบายในบทถัดๆไป สนุกแน่นอน)</li>
</ul>
บทความนี้ผมจะอธิบายเป็นแบบ function component ทั้งหมด ส่วนหนึ่งเพราะปีที่ผมจบมา ตอนนั้น React มี hooks แล้ว ส่วนตัวไม่เคยเขียน แบบ class เลย
เรามาเริ่มกันดีกว่า เกริ่นไว้ซะเยอะ
<h3>useState</h3>
useState คือ function นึง ของ hooks ที่ใช้ในการจัดการ state ต่างๆ
ทำไมถึงต้องใช้ state ใช้ตัวแปรปกติไม่ได้หรอ คำตอบคือไม่ได้ ถ้าอยากให้ ค่าตัวแปรนั้น update แล้วให้ UI ที่แสดงมีค่าเปลี่ยนแปรงตาม เราจำเป็นที่จะต้องใช้ state เป็นตัวจัดการและบอกกับ React แล้ว React จะสามารถรู้ว่า ค่าตัวไหนมีการอัพเดทและ UI จะอัพเดทตาม แต่ถ้าเป็นตัวแปรปกติ ถ้าค่าตัวแปรมีการอัพเดท ตัวแปรตัวนั้นจะ update ค่าแต่ว่าหน้า UI จะไม่สามารถ update ตามได้เพราะ react จะไม่รู้ว่ามีการเปลี่ยนแปรงค่า เราจึงต้องใช้ state เป็นตัวบอก
หน้าตาของ useState จะประมาณนี้
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RqJhuLxu1jk43H_3kccH8g.png"></figure><blockquote>สิ่งที่ควรสังเกตุ ของ useState นั้นมีอยู่ 2 ตัวคือ สิ่งที่มัน return ออกมาและ argrument ที่เราต้องส่งเข้าไป</blockquote>
จากตัวอย่างนี้ผมสร้าง state หนึ่งตัวขึ้นว่าชื่อว่า count สิ่งที่มันคืนกลับมาให้คือ array 2 ตัว ตัวแรกจะเป็น ค่า state นั้นๆ และตัวถัดมาจะเป็น function ในการ set state เข้าไปใหม่ ในที่นี้คือ setCount และส่วนที่เป็น argrument ที่ส่งเข้าไปคือจะเป็นการบอกว่า state ตัวนี้ default value คืออะไร เช่น ตัวอย่างคือผมใส่ 0 เข้าไป เพราะฉะนั้น ตัวแปร count จะมีค่าเท่ากับ 0 แต่ถ้าหาก ผมใส่ 10 เข้าไปใน argrument count ก็จะมีค่า default value เป็น 10
เรามาลองใช้จริงกันดีกว่า
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dfR45bv7lFD9pTeDPZZj2Q.png"><figcaption><a href="https://codesandbox.io/s/eloquent-clarke-5n8tw?file=/src/App.js">try in codesandbox</a></figcaption></figure>ตัวอย่างผมจะให้ click ปุ่มแล้วให้ set state ใหม่เป็น 10 แล้วมาลองดูกัน <a href="https://codesandbox.io/s/eloquent-clarke-5n8tw?file=/src/App.js">try in codesandbox</a>
การ update state จากค่าเดิมของตัวมันเองมี 2 วิธี
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mHMw2e_km0Oe8aPNeGuxBQ.png"></figure>วีธีแรกจริงๆก็ใช้ได้ และคนที่เพิ่งเริ่มใช้ hook ใหม่ๆ ผมเชื่อว่าเกือบทุกคนเคยเขียนแบบนี้ แต่ react แนะนำให้ใช้วิธีที่สอง ตัว function set state จะส่ง callback กลับมา และเราสามารถเอาค่าที่มัน callback กลับมาใช้แบบถูกต้องตาม react แนะนำ
ลองมาประยุกต์ใช้กันหน่อยสิ๊
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qMvvMa_TeLljeCjfGk4EQg.png"><figcaption><a href="https://codesandbox.io/s/frosty-sound-m4mhu?file=/src/App.js">try in codesandbox</a></figcaption></figure>ตัวอย่างผมจะให้กด ปุ่มแล้วเพิ่มทีละ 1 และก็ลบทีละ 1 และก็มี ตัว reset ค่า <a href="https://codesandbox.io/s/frosty-sound-m4mhu?file=/src/App.js">try in codesandbox</a>
และอีกอย่างที่สำคัญ function set state ทำงานแบบ asynchronous ถ้าหากเราเรียกใช้ set state แล้วมันจะทำงานถัดไปต่อโดยทันที โดยไม่รอให้ function set state ทำงานเสร็จ ถ้าหากเราเรียกใช้ set state ติดๆกัน บางทีอาจจะทำให้ state เกิดการผิดพลาดได้
ข้อควรระวัง** สำหรับการ set state ตอนผมเริ่มเขียนใหม่ๆก็เคยเจอ และตาม กลุ่ม react ตอนนี้ผมก็ยังเห็นมือใหม่ยังเจอแบบนี้กันอยู่
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9ohnlADDOC7wNw7ur1Bq0Q.png"></figure>ถ้าหากเรา set state ใน function บางอย่างแล้วเราเรียกใช้ค่านั้นเลยในทันที สิ่งที่ได้จากโค้ดตัวอย่างข้างบน คนที่เริ่มเขียนใหม่ๆก็คงจะคิดว่า count จะมีค่าเท่ากับ 1 แต่ไม่เลย ในโค้ดตัวอย่างถ้า log ออกมาค่าจะยังเป็น 0 อยู่
ผมก็ไม่ชัวร์เหมือนกันว่ามันเป็นเพราะอะไร แต่ที่รู้ๆ state จะทำการ update เมื่อ function handleSomething นี้ทำงานเสร็จ ถ้าหากเอา log ไว้ข้างใน function หลังจาก set state ค่าจะยังเป็น 0 แต่ถ้าหากเอา log ไว้ข้างนอก ค่า state จะถูก update และกลายเป็น 1
วิธีที่ผมใช้ประจำคือจัดการตัว state นั้นให้เรียบร้อยก่อนแล้วนำไปใช้แบบนี้
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8WW2wXaB_CeWei42EyHtFA.png"></figure>useState ใช้ได้กับ value ทุกประเภทเลยนะครับ บทความนี้ผมยกตัวอย่างมาแค่ integer เราสามารถใช้กับ string, object, array ได้หมดเลย
ก็จบไปแล้วนะครับ สำหรับตัว useState พื้นฐานแบบบ้านๆ เดี๋ยวจะมีบทความต่อๆไปสำหรับ hooks ตัวอื่นๆอีก ถ้ามีบทความต่อไป เดี๋ยวผมจะเอาลิ้งมาอัพเดทกันนะครับ รับรองว่าซิ่ง 5555
<ul>
<li>useState ✅</li>
<li>useEffect <a href="https://medium.com/foxbith/react-hooks-101-part-2-9426376fd38">ลิงค์</a>
</li>
<li>useCallback // Coming soon…</li>
<li>useMemo // Coming soon…</li>
<li>useContext // Coming soon…</li>
<li>Custom hook // Coming soon…</li>
</ul>
ก่อนจากกันไป จริงๆแล้วผมเขียนบทความนี้เป็นบทความแรก ถ้าหากมีอะไรผิดพลาดตรงไหนประการใด ผมขออภัยไว้ ณ ที่นี้ด้วยนะครับ ขอบคุณที่เข้ามาอ่านกันครับ 🙏🙇‍♂️
<blockquote>Ref.</blockquote>
<blockquote><a href="https://reactjs.org/docs/hooks-intro.html">- reactjs.org</a></blockquote>
<blockquote><a href="https://www.designil.com/react-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/">- https://www.designil.com/react-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/</a></blockquote>
<blockquote><a href="https://medium.com/@pakawatmange/react-909-props-f8a40e361873">- https://medium.com/@pakawatmange/react-909-props-f8a40e361873</a></blockquote>
<blockquote><a href="https://www.borntodev.com/2020/07/31/react-state/">- https://www.borntodev.com/2020/07/31/react-state/</a></blockquote>
<blockquote>- thanks for free image wallpaper <a href="https://wallpaperbat.com/react-wallpapers">https://wallpaperbat.com/react-wallpapers</a>
</blockquote>
<figure><a href="https://www.buymeacoffee.com/khetkoong"><img alt="" src="https://cdn-images-1.medium.com/max/170/1*Dpw8-hNGI2fDmosV4E8DVQ.png"></a><figcaption>buy me a coffee</figcaption></figure><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b646753e231f" width="1" height="1" alt=""><hr>
<a href="https://medium.com/foxbith/react-hooks-101-b646753e231f">React Hooks 101</a> was originally published in <a href="https://medium.com/foxbith">FOXBITH</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.