Skip to main content

6 posts tagged with "react"

View All Tags

· 5 min read
Kongvut Sangkla

Intro

สวัสดีครับ บทความนี้จะแชร์เทคนิคเพิ่มประสิทธิภาพในการโหลดหน้าเว็บ Apps และขนาดของ Bundle size ด้วย Dynamically Importing Components ของ React.lazy

ใน JavaScript frameworks เช่น React โดยปกติจะใช้ Statically import สำหรับการเรียก Components ซึ่งเมื่อเปิด Apps ก็จะเป็นการเรียกใช้ทันที แต่บางทีก็ไม่ได้มีความจำเป็นที่จะต้องการทันทีขนาดนั้น

Dynamically Importing จึงเป็นเทคนิคที่เข้ามาช่วยแก้ปัญหานี้เพื่อใช้ Import Components เมื่อจำเป็นต้องเรียกใช้เท่านั้น

ปัญหาของ Statically import คือการเรียกใช้ Components ทันทีโดยไม่ได้คำนึงว่าจะใช้งานหรือไม่ แต่ลองคิดดูว่า บาง Component จะ Render หลังจาก User interacts เท่านั้น หรือก็จากเงื่อนไขบางอย่าง ตัวอย่างดังนี้

· 9 min read
Kongvut Sangkla

Intro

บทความสรุป React cheatsheet นี้จะเป็นการอธิบายเกี่ยวกับ React พื้นฐานเนื้อหาอย่างย่อเพื่อทำความเข้าใจ React อย่างรวดเร็ว และให้คุณเห็นภาพรวมของแนวคิด React ทั้งหมดที่คุณต้องรู้ในปี 2022 มาเริ่มกันเลย!

· 4 min read
Kongvut Sangkla

Intro

สวัสดีครับ บทความนี้จะเป็นการบบันทึกการใช้งาน useRef createRef และ forwardRef ของ React โดย useRef และ createRef มีความคล้ายคลึงกันมากและแตกต่างกันอย่างไรมาดูกัน 🚀

· 3 min read
Kongvut Sangkla

Intro

สวัสดีครับ บทความนี้จะแนะนำแนวทางการใช้งาน React Hooks ที่ชื่อ useMemo และ useCallback คืออะไร มีความสำคัญอย่างไร ช่วยเพิ่มประสิทธิภาพลดการ Render ของ React ที่หนักหน่วงอย่างไร ควร Refactor อย่างไร มาดูกันเลยครับ 😍

· 5 min read
Kongvut Sangkla

Intro

บทความนี้จะเป็นการติดตั้ง Next.js ที่เป็น TypeScript รวมกับ ESLint Prettier และ Ant Design โดย ESLint จะเป็น Linter ที่จะแนะนำให้เราเขียนโค้ดตามมาตรฐาน ส่วน Prettier คือตัวช่วยที่ในการเขียนโค้ดเราดูสวยมากขึ้น อ่านง่ายมากขึ้น และยังช่วยในการจัดฟอร์แมตอัตโนมัติ และสุดท้าย Ant Design คือ Frontend Framework ที่ช่วยให้นักพัฒนาออกแบบ UI ได้ สวยงาม ง่ายและรวดเร็ว โดยมี Component ต่าง ๆ มากมายให้เลือกใช้เยอะมาก