9 posts tagged with "react"

Intro​

• StrictMode problems
• useEffect and deps problems
• Primitive and Non-Primitive
• Cleanup function

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 เท่านั้น หรือก็จากเงื่อนไขบางอย่าง ตัวอย่างดังนี้

Intro​

สวัสดีครับ จากบทความครั้งก่อนได้พูดถึง เทคนิค Debouncing โดยบทความนี้จะพูดถึงเทคนิค Throttling ที่มีความคล้ายคลึงกัน ซึ่งเป็นเทคนิคที่มีประโยชน์ช่วยเพิ่มประสิทธิภาพ Performance ได้ทั้ง Frontend App และ Backend App ที่ช่วยแก้ปัญหาการเกิด callback จำนวนมากจาก Event listeners มีรายละเอียดดังนี้

Intro​

สวัสดีครับ บทความนี้จะพามารู้จักกับ Debouncing โดย Debouncing เป็นเทคนิคที่มีประโยชน์ในการเพิ่มประสิทธิภาพ Performance ของ Client-side applications โดยเป็นหนึ่งเทคนิคในหลายสิ่งที่สำคัญในการพัฒนา Web App และ Software ซึ่งตามปกติโปรแกรมเมอร์จำเป็นต้องเขียนโค้ดโปรแกรมโดยคำนึง Performance เพื่อที่จะเพิ่มประสบการณ์ผู้ใช้งานที่ดี (UX) กับ Software

Intro​

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

Intro​

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

Intro​

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

Intro​

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

เป็นบทความที่แปลและเรียบเรียงใหม่จาก: https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation