รีแอค (ซอฟต์แวร์)

ปฏิกิริยา
ผู้เขียนต้นฉบับ	จอร์แดน วอล์ค
นักพัฒนา	เมตาและชุมชน
ปล่อย	29 พฤษภาคม 2556 [ 1 ] [ 2 ] ( 29 พฤษภาคม 2013 )
เวอร์ชันเสถียร
19.2.7 [ 3 ]  / 1 มิถุนายน 2026 [ 4 ] ( 1 มิถุนายน 2569 )
เวอร์ชันทดลองใช้งาน
19.0.0-rc.1 / 14 พฤศจิกายน 2024 [ 5 ] ( 14 พฤศจิกายน 2024 )
เขียนเป็น	โค้ด JavaScript
แพลตฟอร์ม	แพลตฟอร์มเว็บ
พิมพ์	ไลบรารี JavaScript
ใบอนุญาต	ใบอนุญาต MIT
เว็บไซต์	react .dev
ที่เก็บข้อมูล	github.com/facebook/react​​​

React (หรือที่รู้จักกันในชื่อReact.jsหรือReactJS ) เป็นไลบรารี JavaScript สำหรับส่วนหน้าแบบโอเพนซอร์สและฟรี^{[ 6 ] [ 7 ]}ที่มุ่งเน้นการสร้างส่วนติดต่อผู้ใช้โดยใช้คอมโพเนนต์ ให้ "ราบรื่น" มากขึ้น^{[ 6 ]}ได้รับการดูแลโดยMeta (เดิมคือ Facebook) และชุมชนของนักพัฒนาและบริษัทต่างๆ^{[ 8 ] [ 9 ] [ 10 ]}จากผลสำรวจนักพัฒนา Stack Overflow ปี 2025 พบว่า React เป็นหนึ่งในเทคโนโลยีเว็บที่ใช้กันมากที่สุด^{[ 11 ]}

React สามารถใช้ในการพัฒนา แอปพลิเคชัน แบบหน้าเดียว แอปพลิเคชัน บนมือถือ หรือ แอป พลิเคชันที่แสดงผล บนเซิร์ฟเวอร์ โดยใช้เฟรมเวิร์กต่างๆ เช่นNext.jsและReact Routerเนื่องจาก React เกี่ยวข้องเฉพาะกับส่วนติดต่อผู้ใช้และการแสดงผลคอมโพเนนต์ไปยังDOM เท่านั้น แอปพลิเคชัน React จึงมักอาศัยไลบรารีสำหรับการกำหนดเส้นทางและฟังก์ชันการทำงานฝั่งไคลเอ็นต์อื่นๆ^{[ 12 ] [ 13 ]}ข้อได้เปรียบที่สำคัญของ React คือจะแสดงผลเฉพาะส่วนของหน้าเว็บที่เปลี่ยนแปลงไปเท่านั้น หลีกเลี่ยงการแสดงผลซ้ำโดยไม่จำเป็นขององค์ประกอบ DOM ที่ไม่เปลี่ยนแปลง React ถูกใช้โดยเว็บไซต์ประมาณ 6% ของเว็บไซต์ทั้งหมด^{[ 14 ]}

React ยึดมั่นในกระบวนทัศน์ การเขียนโปรแกรม แบบประกาศ^{[ 15 ] [ 16 ] :} นักพัฒนาออกแบบมุมมองสำหรับแต่ละสถานะของแอปพลิเคชัน และ React จะอัปเดตและเรนเดอร์คอมโพเนนต์เมื่อข้อมูลเปลี่ยนแปลง ซึ่งแตกต่างจาก การ เขียนโปรแกรมแบบเชิงคำสั่ง^{[ 17 ]}

โค้ด React ประกอบด้วยเอนทิตีที่เรียกว่าคอมโพเนนต์[ ^{16 ] : 10–12} คอมโพเนนต์เหล่านี้เป็นแบบโมดูลาร์และสามารถนำกลับมาใช้ใหม่ได้^{[ 16 ] : 70} แอปพลิเคชัน React โดยทั่วไปประกอบด้วยคอมโพเนนต์หลายชั้น คอมโพเนนต์จะถูกเรนเดอร์ไปยังองค์ประกอบรากในDOMโดยใช้ไลบรารี React DOM เมื่อเรนเดอร์คอมโพเนนต์ ค่าต่างๆ จะถูกส่งผ่านระหว่างคอมโพเนนต์ผ่านprops (ย่อมาจาก "properties") ค่าภายในคอมโพเนนต์เรียกว่าสถานะ ของคอมโพเนนต์ ^{[ 18 ]}

วิธีการหลักสองวิธีในการประกาศคอมโพเนนต์ใน React คือการใช้คอมโพเนนต์ฟังก์ชันและคอมโพเนนต์คลาส^{[ 16 ] : 118 [ 19 ] : 10} ตั้งแต่ React เวอร์ชัน 16.8 เป็นต้นไป การใช้คอมโพเนนต์ฟังก์ชันเป็นวิธีที่แนะนำ

คอมโพเนนต์ฟังก์ชัน ซึ่งประกาศในงาน React Conf 2018 และใช้งานได้ตั้งแต่ React เวอร์ชัน 16.8 จะถูกประกาศด้วยฟังก์ชันที่รับอาร์กิวเมนต์ "props" เพียงตัวเดียวและส่งคืน JSX (JavaScript XML) คอมโพเนนต์ฟังก์ชันสามารถใช้สถานะภายในด้วยuseStateHook ได้ ^{[ 20 ]}

เมื่อวันที่ 16 กุมภาพันธ์ 2019 React 16.8 ได้ถูกเผยแพร่สู่สาธารณะ โดยมีการแนะนำ React Hooks ^{[ 20 ]} Hooks คือฟังก์ชันที่ช่วยให้นักพัฒนาสามารถ "เชื่อมต่อ" กับสถานะและคุณสมบัติวงจรชีวิตของ React จากคอมโพเนนต์ฟังก์ชันได้^{[ 21 ]}ที่สำคัญ Hooks ไม่ทำงานภายในคลาส — ช่วยให้นักพัฒนาสามารถใช้คุณสมบัติเพิ่มเติมของ React ได้โดยไม่ต้องใช้คลาส^{[ 22 ]}

React มี hook ในตัวหลายตัว เช่น^{[ 23}useState ] ^{[ 19 ] : 37 ,} useContext [ ^{16 ] : 11 [ 23 ] [ 19 ] : 12} useReducer , ^{[ 16 ] : 92 [ 23 ] [ 19 ] : 65–66} useMemo^{[ 16 ] : 154 [ 23 ] [ 19 ] : 162} และuseEffect[ ^{24 ] [ 19 ] : 93–95} hook อื่นๆ ได้รับการบันทึกไว้ใน Hooks API Reference ^{[ 25 ] [ 16 ] : 62} และ ซึ่งเป็น ^hookที่ใช้กันมากที่สุด ใช้สำหรับควบคุมสถานะ^{[ 16 ] : 37} และผลข้างเคียง [ ^{16 ] : 61} ตามลำดับ useStateuseEffect

มีกฎสองข้อของฮุก^{[ 26 ]}ซึ่งอธิบายรูปแบบโค้ดลักษณะเฉพาะที่ฮุกใช้:

1. "เรียกใช้ hook เฉพาะในระดับบนสุดเท่านั้น" — ห้ามเรียกใช้ hook จากภายในลูป เงื่อนไข หรือคำสั่งซ้อนกัน เพื่อให้ hook ถูกเรียกใช้ในลำดับเดียวกันทุกครั้งที่แสดงผล
2. "เรียกใช้ hook จากฟังก์ชัน React เท่านั้น" — ห้ามเรียกใช้ hook จากฟังก์ชัน JavaScript ทั่วไป เพื่อให้ตรรกะที่มีสถานะยังคงอยู่กับคอมโพเนนต์

แม้ว่ากฎเหล่านี้จะไม่สามารถบังคับใช้ได้ในขณะรันไทม์ แต่เครื่องมือวิเคราะห์โค้ด เช่นlintersสามารถกำหนดค่าเพื่อตรวจจับข้อผิดพลาดมากมายในระหว่างการพัฒนาได้ กฎเหล่านี้ใช้ได้ทั้งกับการใช้งาน Hooks และการใช้งาน Hooks แบบกำหนดเอง^{[ 27 ]}ซึ่งอาจเรียก Hooks อื่นๆ

คอมโพเนนต์เซิร์ฟเวอร์ React ( RSC ) ^{[ 28 ]}เป็นคอมโพเนนต์ฟังก์ชันที่ทำงานเฉพาะบนเซิร์ฟเวอร์เท่านั้น แนวคิดนี้ได้รับการแนะนำครั้งแรกในการบรรยายเรื่อง "การดึงข้อมูลด้วยคอมโพเนนต์เซิร์ฟเวอร์" ^{[ 29 ]} ปัจจุบัน คอมโพเนนต์เซิร์ฟเวอร์สามารถใช้งานได้ง่ายที่สุดกับNext.jsด้วย Next.js ทำให้สามารถเขียนคอมโพเนนต์สำหรับทั้งเซิร์ฟเวอร์และไคลเอ็นต์ (เบราว์เซอร์) ได้ เมื่อเบราว์เซอร์ได้รับคอมโพเนนต์ที่แสดงผลจากเซิร์ฟเวอร์ React ในเบราว์เซอร์จะเข้ามารับช่วงต่อและสร้าง Virtual DOM และแนบตัวจัดการเหตุการณ์ ซึ่งเรียกว่าไฮเดรชั่น^{[ 30 ]}

แม้ว่าจะมีแนวคิดคล้ายกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (Server Side Rendering ) แต่ RSC ไม่ส่ง JavaScript ที่เกี่ยวข้องไปยังไคลเอ็นต์ เนื่องจากไม่มีการไฮเดรชั่นเกิดขึ้น ส่งผลให้ไม่สามารถเข้าถึงฮุกได้ อย่างไรก็ตาม อาจเป็นฟังก์ชันแบบอะซิงโครนัสซึ่งช่วยให้สามารถดำเนินการแบบอะซิงโครนัสได้โดยตรง:

ฟังก์ชันอะซิงโครนัสMyComponent () {const message = await fetchMessageFromDb ();กลับ(<div> ข้อความ: { ข้อความ} </div>​​​);}

คอมโพเนนต์แบบคลาสถูกประกาศโดยใช้ คลาส ES6โดยจะทำงานในลักษณะเดียวกับคอมโพเนนต์แบบฟังก์ชัน แต่แทนที่จะใช้ Hooks ในการจัดการสถานะและเหตุการณ์วงจรชีวิต คอมโพเนนต์แบบคลาสจะใช้วิธีการวงจรชีวิตของReact.Componentคลาสพื้นฐานแทน

คลาสParentComponent สืบทอดมาจากReact.Component {สถานะ= { สี: 'สีเขียว' };เรนเดอร์() {กลับ(< ChildComponent color = { this . state . color } />);}}

React เองไม่ได้มาพร้อมกับการสนับสนุนการกำหนดเส้นทาง ในตัว React เป็นไลบรารีสำหรับการสร้างอินเทอร์เฟซผู้ใช้เป็นหลัก และไม่ได้รวมโซลูชันการกำหนดเส้นทางแบบเต็มรูปแบบไว้ในตัว ไลบรารีของบุคคลที่สามสามารถใช้เพื่อจัดการการกำหนดเส้นทางในแอปพลิเคชัน React ได้ เช่น React Router ^{[ 31 ]}ซึ่งช่วยให้นักพัฒนาสามารถกำหนดเส้นทาง จัดการการนำทาง และจัดการการเปลี่ยนแปลง URL ในลักษณะที่เป็นมิตรกับ React

อีกหนึ่งคุณสมบัติที่โดดเด่นคือการใช้Document Object Model เสมือน หรือVirtual DOM React สร้าง โครงสร้างข้อมูล ในหน่วยความจำที่คล้ายกับ DOM ของเบราว์เซอร์ ทุกครั้งที่คอมponent ถูกเรนเดอร์ ผลลัพธ์จะถูกเปรียบเทียบกับ Virtual DOM จากนั้นจะอัปเดต DOM ที่แสดงในเบราว์เซอร์อย่างมีประสิทธิภาพโดยใช้เฉพาะส่วนต่างที่คำนวณได้^{[ 32 ]}กระบวนการนี้เรียกว่าการกระทบยอด (reconciliation ) ซึ่งช่วยให้โปรแกรมเมอร์สามารถเขียนโค้ดได้ราวกับว่าทั้งหน้าเว็บถูกเรนเดอร์ทุกครั้งที่มีการเปลี่ยนแปลง ในขณะที่ React จะเรนเดอร์เฉพาะคอมponent ที่เปลี่ยนแปลงจริงเท่านั้น การเรนเดอร์แบบเลือกนี้ช่วยเพิ่มประสิทธิภาพได้อย่างมาก^{[ 33 ] [ 34 ]}

เมื่อReactDOM.render^{[ 35 ]}ถูกเรียกอีกครั้งสำหรับส่วนประกอบและเป้าหมายเดียวกัน React จะแสดงสถานะ UI ใหม่ใน Virtual DOM และกำหนดว่าส่วนใด (ถ้ามี) ของ living DOM จำเป็นต้องเปลี่ยนแปลง^{[ 36 ]}

เมธอดวงจรชีวิตสำหรับคอมโพเนนต์แบบคลาสใช้รูปแบบการฮุก (hooking)ซึ่งช่วยให้สามารถเรียกใช้โค้ด ณ จุดที่กำหนดไว้ในระหว่างอายุการใช้งานของคอมโพเนนต์ได้

• ShouldComponentUpdateช่วยให้นักพัฒนาสามารถป้องกันการเรนเดอร์คอมโพเนนต์ซ้ำโดยไม่จำเป็นได้ โดยการส่งค่า false กลับมาหากไม่จำเป็นต้องเรนเดอร์
• componentDidMountฟังก์ชัน นี้จะถูกเรียกเมื่อคอมโพเนนต์ "ถูกติดตั้ง" แล้ว (คอมโพเนนต์ถูกสร้างขึ้นในส่วนติดต่อผู้ใช้ โดยส่วนใหญ่มักทำโดยการเชื่อมโยงกับ โหนด DOM ) โดยทั่วไปแล้วจะใช้เพื่อเรียกใช้งานการโหลดข้อมูลจากแหล่งข้อมูลระยะไกลผ่านAPI
• componentDidUpdateจะถูกเรียกใช้ทันทีหลังจากการอัปเดตเกิดขึ้น^{[ 37 ]}
• componentWillUnmountฟังก์ชันนี้จะถูกเรียกทันทีก่อนที่คอมโพเนนต์จะถูกรื้อถอนหรือ "ยกเลิกการติดตั้ง" โดยทั่วไปแล้วจะใช้เพื่อล้างการพึ่งพาที่ใช้ทรัพยากรมากของคอมโพเนนต์ ซึ่งจะไม่ถูกลบออกไปพร้อมกับการยกเลิกการติดตั้งคอมโพเนนต์ (เช่น การลบอินสsetInterval()แตนซ์ใดๆ ที่เกี่ยวข้องกับคอมโพเนนต์ หรือ " eventListener " ที่ตั้งค่าไว้บน "document" เนื่องจากการมีอยู่ของคอมโพเนนต์)
• renderเป็นเมธอดวงจรชีวิตที่สำคัญที่สุดและเป็นเมธอดเดียวที่จำเป็นในทุกคอมโพเนนต์ โดยปกติจะถูกเรียกใช้ทุกครั้งที่สถานะของคอมโพเนนต์ได้รับการอัปเดต ซึ่งควรสะท้อนให้เห็นในส่วนติดต่อผู้ใช้

JSXหรือ JavaScript XML เป็นส่วนขยายของไวยากรณ์ภาษา JavaScript ^{[ 38 ]}มีลักษณะคล้ายกับ HTML ^{[ 16 ] : 11} JSX ให้วิธีการจัดโครงสร้างการเรนเดอร์คอมโพเนนต์โดยใช้ไวยากรณ์ที่คุ้นเคย^{[ 16 ] : 15} สำหรับนักพัฒนาหลายคน คอมโพเนนต์ React มักเขียนโดยใช้ JSX แม้ว่าจะไม่จำเป็นเสมอไป (คอมโพเนนต์อาจเขียนด้วย JavaScript บริสุทธิ์ก็ได้) ในระหว่างการคอมไพล์ JSX จะถูกแปลงเป็นโค้ด JavaScript JSX คล้ายกับไวยากรณ์ส่วนขยายอีกตัวหนึ่งที่สร้างโดย Facebook สำหรับPHPที่ เรียกว่าXHP

ตัวอย่างโค้ด JSX:

ฟังก์ชันExample () { // ประกาศตัวแปรสถานะใหม่ ซึ่งเราจะเรียกว่า "count" const [ count , setCount ] = useState ( 0 );return ( < div > < p > คุณคลิก{ count } ครั้ง</ p > < button onClick = {() => setCount ( count + 1 )}> คลิกฉัน</ button > </ div > ); }

สถาปัตยกรรมพื้นฐานของ React ใช้ได้นอกเหนือจากการเรนเดอร์ HTML ในเบราว์เซอร์ ตัวอย่างเช่น Facebook มีแผนภูมิแบบไดนามิกที่เรนเดอร์เป็น<canvas>แท็ก^{[ 39 ]}และ Netflix และPayPalใช้การโหลดแบบสากลเพื่อเรนเดอร์ HTML ที่เหมือนกันทั้งบนเซิร์ฟเวอร์และไคลเอ็นต์^{[ 40 ] [ 41 ]}นอกจากนี้ React ยังสามารถใช้เพื่อพัฒนาแอปเนทีฟสำหรับ Android และ iOS โดยใช้React Nativeได้ อีกด้วย

การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) หมายถึงกระบวนการเรนเดอร์แอปพลิเคชัน JavaScript ฝั่งไคลเอ็นต์บนเซิร์ฟเวอร์ แทนที่จะเป็นในเบราว์เซอร์^{[ 42 ]}ซึ่งสามารถปรับปรุงประสิทธิภาพของแอปพลิเคชันได้ โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้ที่มีการเชื่อมต่อหรืออุปกรณ์ที่ช้ากว่า^{[ 43 ]}

ด้วย SSR HTML เริ่มต้นที่ส่งไปยังไคลเอ็นต์จะรวม UI ที่แสดงผลอย่างสมบูรณ์ของแอปพลิเคชัน^{[ 44 ]}ซึ่งช่วยให้เบราว์เซอร์ของไคลเอ็นต์แสดง UI ได้ทันที แทนที่จะต้องรอให้ JavaScript ดาวน์โหลดและทำงานก่อนจึงจะแสดงผล UI ได้^{[ 44 ]}

React รองรับ SSR ซึ่งช่วยให้นักพัฒนาสามารถเรนเดอร์คอมโพเนนต์ React บนเซิร์ฟเวอร์และส่ง HTML ที่ได้ไปยังไคลเอ็นต์^{[ 45 ]}ซึ่งอาจเป็นประโยชน์ในการปรับปรุงประสิทธิภาพของแอปพลิเคชัน รวมถึงเพื่อวัตถุประสงค์ในการเพิ่มประสิทธิภาพการค้นหาในเครื่องมือค้นหา^{[ 46 ]}

React ไม่ได้พยายามที่จะจัดหาไลบรารีแอปพลิเคชันที่สมบูรณ์ มันถูกออกแบบมาโดยเฉพาะสำหรับการสร้างอินเทอร์เฟซผู้ใช้^{[ 6 ]}และด้วยเหตุนี้จึงไม่ได้รวมเครื่องมือมากมายที่นักพัฒนาบางคนอาจพิจารณาว่าจำเป็นสำหรับการสร้างแอปพลิเคชัน ซึ่งทำให้สามารถเลือกไลบรารีใดก็ได้ที่นักพัฒนาต้องการเพื่อทำงานต่างๆ เช่น การเข้าถึงเครือข่ายหรือการจัดเก็บข้อมูลในเครื่อง รูปแบบการใช้งานทั่วไปได้เกิดขึ้นเมื่อไลบรารีมีความสมบูรณ์มากขึ้น

เพื่อรองรับแนวคิดการไหลของข้อมูลแบบทิศทางเดียวของ React (ซึ่งอาจแตกต่างจากการไหลแบบสองทิศทางของAngularJS ) สถาปัตยกรรม Fluxจึงถูกพัฒนาขึ้นมาเพื่อเป็นทางเลือกแทน สถาปัตยกรรม model–view–controller ที่ได้รับความนิยม Flux มีแอ็กชันที่ส่งผ่านตัวส่ง ส่วนกลาง ไปยังสโตร์และการเปลี่ยนแปลงในสโตร์จะถูกส่งกลับไปยังวิว^{[ 47 ]}เมื่อใช้กับ React การส่งต่อนี้จะทำผ่านคุณสมบัติของคอมโพเนนต์ นับตั้งแต่เริ่มพัฒนา Flux ก็ถูกแทนที่ด้วยไลบรารีต่างๆ เช่นReduxและ MobX ^{[ 48 ]}

ฟลัก ซ์สามารถถือได้ว่าเป็นรูปแบบหนึ่งของการสังเกตการณ์^{[ 49 ]}

คอมponent React ภายใต้สถาปัตยกรรม Flux ไม่ควรแก้ไข props ที่ส่งมาโดยตรง แต่ควรส่งฟังก์ชัน callbackที่สร้างactionซึ่งจะถูกส่งโดย dispatcher เพื่อแก้ไข store action คืออ็อบเจ็กต์ที่มีหน้าที่อธิบายสิ่งที่เกิดขึ้น ตัวอย่างเช่น action ที่อธิบายว่าผู้ใช้คนหนึ่ง "ติดตาม" อีกคนหนึ่ง อาจประกอบด้วย user id, target user id และ type USER_FOLLOWED_ANOTHER_USER[ ^{50 ] store}ซึ่งสามารถคิดได้ว่าเป็นโมเดล สามารถเปลี่ยนแปลงตัวเองเพื่อตอบสนองต่อ action ที่ได้รับจาก dispatcher

รูปแบบนี้บางครั้งแสดงออกมาในรูปแบบ "คุณสมบัติไหลลง การกระทำไหลขึ้น" มีการสร้างการใช้งาน Flux มากมายนับตั้งแต่เริ่มแรก ซึ่งอาจเป็นที่รู้จักมากที่สุดคือReduxซึ่งมี store เดียว มักเรียกว่าแหล่งที่มาของความจริงเพียงแหล่งเดียว^{[ 51 ]}

ในเดือนกุมภาพันธ์ พ.ศ. 2562 useReducerได้มีการนำเสนอเป็นReact hookในเวอร์ชัน 16.8 โดยมี API ที่สอดคล้องกับ Redux ทำให้ผู้พัฒนาสามารถสร้าง store ที่คล้ายกับ Redux ซึ่งอยู่ภายในสถานะของคอมโพเนนต์ได้^{[ 52 ]}

React ถูกสร้างขึ้นโดย Jordan Walke วิศวกรซอฟต์แวร์ที่ Facebook, Inc. (ปัจจุบันคือ Meta ) ซึ่งในตอนแรกได้พัฒนาต้นแบบที่เรียกว่า "F-Bolt" ^{[ 53 ]}ก่อนที่จะเปลี่ยนชื่อเป็น "FaxJS" ในภายหลัง เวอร์ชันแรกนี้ได้รับการบันทึกไว้ในที่เก็บ GitHub ของ Jordan Walke ^[1]อิทธิพลสำหรับโครงการนี้รวมถึงXHPซึ่ง เป็นไลบรารี ส่วนประกอบ HTMLสำหรับPHP

React ถูกนำไปใช้งานครั้งแรกบน News Feedของ Facebook ในปี 2011 และต่อมาได้ถูกรวมเข้ากับInstagramในปี 2012 ^{[ 54 ]}ในเดือนพฤษภาคม 2013 ที่งาน JSConf US โครงการนี้ได้รับการเปิดเผยเป็นโอเพนซอร์สอย่างเป็นทางการ ซึ่งถือเป็นจุดเปลี่ยนสำคัญในการนำไปใช้งานและการเติบโต^[2]

React Nativeซึ่งเป็นเครื่องมือที่ช่วยให้สามารถพัฒนาแอปพลิเคชันแบบเนทีฟสำหรับAndroid , iOSและUWPด้วย React ได้รับการประกาศเปิดตัวในงาน React Conf ของ Facebook ในเดือนกุมภาพันธ์ 2015 และเปิดให้ใช้งานแบบโอเพนซอร์สในเดือนมีนาคม 2015

เมื่อวันที่ 18 เมษายน 2560 Facebook ได้ประกาศ React Fiber ซึ่งเป็นชุดอัลกอริธึมภายในชุดใหม่สำหรับการเรนเดอร์ ซึ่งแตกต่างจากอัลกอริธึมการเรนเดอร์แบบเก่าของ React ที่เรียกว่า Stack ^{[ 55 ]} React Fiber จะกลายเป็นรากฐานของการปรับปรุงและการพัฒนาฟีเจอร์ในอนาคตของไลบรารี React ^{[ 56 ]}ไวยากรณ์จริงสำหรับการเขียนโปรแกรมด้วย React ไม่เปลี่ยนแปลง มีเพียงวิธีการทำงานของไวยากรณ์เท่านั้นที่เปลี่ยนไป^{[ 57 ]}ระบบการเรนเดอร์แบบเก่าของ React ที่เรียกว่า Stack ถูกพัฒนาขึ้นในช่วงเวลาที่ยังไม่เข้าใจถึงจุดเน้นของระบบในเรื่องการเปลี่ยนแปลงแบบไดนามิก Stack จึงวาดแอนิเมชันที่ซับซ้อนได้ช้า เช่น การพยายามทำให้เสร็จทั้งหมดในครั้งเดียว Fiber จะแบ่งแอนิเมชันออกเป็นส่วนๆ ที่สามารถกระจายออกไปได้หลายเฟรม ในทำนองเดียวกัน โครงสร้างของหน้าเว็บสามารถแบ่งออกเป็นส่วนๆ ที่สามารถบำรุงรักษาและอัปเดตแยกกันได้ ฟังก์ชัน JavaScript และออบเจ็กต์ Virtual DOMเรียกว่า "ไฟเบอร์" และแต่ละส่วนสามารถดำเนินการและอัปเดตแยกกันได้ ทำให้การเรนเดอร์บนหน้าจอราบรื่นยิ่งขึ้น^{[ 58 ]}

เมื่อวันที่ 26 กันยายน 2017 React 16.0 ได้ถูกเผยแพร่สู่สาธารณะ^{[ 59 ]} React 16.0 ได้แนะนำ error boundaries ซึ่งเป็นประเภทคอมโพเนนต์ใหม่ที่ดักจับข้อผิดพลาด JavaScript ได้ทุกที่ในโครงสร้างลูก และแสดง UI สำรองแทนที่จะทำให้แอปหยุดทำงาน^{[ 60 ]}

เมื่อวันที่ 20 ตุลาคม 2020 ทีม React ได้ปล่อย React v17.0 ซึ่งถือเป็นการเปิดตัวเวอร์ชันหลักครั้งแรกที่ไม่มีการเปลี่ยนแปลงที่สำคัญใดๆ ต่อ API ที่นักพัฒนา React ใช้งาน^{[ 61 ]}

เมื่อวันที่ 29 มีนาคม พ.ศ. 2565 React 18 ได้ถูกปล่อยออกมา ซึ่งได้แนะนำตัวเรนเดอร์แบบพร้อมกันใหม่ การจัดกลุ่มอัตโนมัติ และการสนับสนุนการเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วย Suspense ^{[ 62 ]} React 18 ได้ยกเลิกการสนับสนุนInternet Explorer 11 ^{[ 63 ]}

เมื่อวันที่ 5 ธันวาคม พ.ศ. 2567 React 19 ได้ถูกปล่อยออกมา เวอร์ชันนี้ได้แนะนำ Actions ซึ่งช่วยลดความซับซ้อนของกระบวนการอัปเดตสถานะโดยใช้ฟังก์ชันแบบอะซิงโครนัส แทนที่จะต้องจัดการสถานะที่รอดำเนินการ ข้อผิดพลาด และการอัปเดตแบบมองโลกในแง่ดีด้วยตนเอง React 19 ยังรวมถึงการสนับสนุนส่วนประกอบเซิร์ฟเวอร์และการสร้างไซต์แบบคงที่ที่ได้รับการปรับปรุง^{[ 64 ]}

ในเดือนตุลาคม พ.ศ. 2568 Meta ประกาศว่าจะบริจาค React, React Native และ JSX ( JavaScript XML ) ให้กับ React Foundation แห่งใหม่ ซึ่งเป็นส่วนหนึ่งของLinux Foundation ^{[ 65 ]}ในวันที่ 24 กุมภาพันธ์ พ.ศ. 2569 React Foundation เปิดตัวอย่างเป็นทางการ โดย Meta Platforms, Inc. ได้บริจาคโครงการ React ให้กับมูลนิธิ^{[ 66 ]}

เมื่อวันที่ 29 พฤศจิกายน 2025 มีการรายงานช่องโหว่ CVE-2025-55182 หรือที่รู้จักกันในชื่อ React2Shell ซึ่งอนุญาตให้มีการเรียกใช้โค้ดจากระยะไกล ช่องโหว่นี้ได้รับ คะแนน CVSSสูงสุดที่ 10.0 ^{[ 67 ] [ 68 ]}มีการแก้ไขในเวอร์ชัน 19.0.1, 19.1.2 และ 19.2.1 ^{[ 69 ]}

เมื่อวันที่ 11 ธันวาคม พ.ศ. 2568 ทีม React ได้เปิดเผยช่องโหว่เพิ่มเติมใน React Server Components ได้แก่ ปัญหาการโจมตีแบบปฏิเสธการให้บริการ (CVE-2025-55184 และ CVE-2025-67779, CVSS 7.5) และปัญหาการเปิดเผยซอร์สโค้ด (CVE-2025-55183, CVSS 5.3) ^{[ 70 ] [ 71 ] [ 72 ] [ 73 ] [ 74 ]}การแก้ไขได้รับการย้อนกลับไปใช้ในเวอร์ชัน 19.0.3, 19.1.4 และ 19.2.3 ^{[ 75 ]}

การเปิดตัว React สู่สาธารณะครั้งแรกในเดือนพฤษภาคม 2013 ใช้Apache License 2.0ในเดือนตุลาคม 2014 React 0.12.00 ได้เปลี่ยนมาใช้ใบอนุญาต BSD 3 ข้อและเพิ่มไฟล์ข้อความ PATENTS แยกต่างหากที่อนุญาตให้ใช้สิทธิบัตรของ Facebook ที่เกี่ยวข้องกับซอฟต์แวร์: ^{[ 77 ]}

สิทธิ์การใช้งานที่ได้รับภายใต้ข้อตกลงนี้จะสิ้นสุดลงโดยอัตโนมัติและโดยไม่ต้องแจ้งให้ทราบล่วงหน้า สำหรับผู้ใดก็ตามที่ยื่นข้อเรียกร้องใดๆ (รวมถึงการฟ้องร้อง การกล่าวอ้าง หรือการดำเนินการอื่นๆ) โดยกล่าวหาว่า (ก) มีการละเมิดโดยตรง โดยอ้อม หรือมีส่วนร่วมในการละเมิดสิทธิบัตรใดๆ หรือการชักจูงให้ละเมิดสิทธิบัตร: (i) โดย Facebook หรือบริษัทในเครือหรือบริษัทในเครือย่อยใดๆ ของ Facebook ไม่ว่าข้อเรียกร้องดังกล่าวจะเกี่ยวข้องกับซอฟต์แวร์หรือไม่ (ii) โดยบุคคลใดๆ หากข้อเรียกร้องดังกล่าวเกิดขึ้นทั้งหมดหรือบางส่วนจากซอฟต์แวร์ ผลิตภัณฑ์ หรือบริการใดๆ ของ Facebook หรือบริษัทในเครือหรือบริษัทในเครือย่อยใดๆ ของ Facebook ไม่ว่าข้อเรียกร้องดังกล่าวจะเกี่ยวข้องกับซอฟต์แวร์หรือไม่ หรือ (iii) โดยบุคคลใดๆ ที่เกี่ยวข้องกับซอฟต์แวร์ หรือ (ข) ว่าสิทธิ์ใดๆ ในสิทธิบัตรของ Facebook เป็นโมฆะหรือไม่สามารถบังคับใช้ได้

ข้อกำหนดที่ไม่ธรรมดานี้ก่อให้เกิดข้อโต้แย้งและการถกเถียงในชุมชนผู้ใช้ React เนื่องจากสามารถตีความได้ว่าเป็นการให้อำนาจ Facebook ในการเพิกถอนใบอนุญาตในหลายสถานการณ์ ตัวอย่างเช่น หาก Facebook ฟ้องร้องผู้รับใบอนุญาตและกระตุ้นให้พวกเขาดำเนินการ "อื่นๆ" โดยการเผยแพร่การกระทำดังกล่าวในบล็อกหรือที่อื่น ๆ หลายคนแสดงความกังวลว่า Facebook อาจใช้ข้อกำหนดการยุติสัญญาอย่างไม่เป็นธรรม หรือการรวม React เข้ากับผลิตภัณฑ์อาจทำให้การเข้าซื้อกิจการในอนาคตของบริษัทสตาร์ทอัพมีความซับซ้อนมากขึ้น^{[ 78 ]}

จากผลตอบรับจากชุมชน Facebook ได้ปรับปรุงการให้สิทธิบัตรในเดือนเมษายน 2558 ให้มีความคลุมเครือน้อยลงและอนุญาตมากขึ้น: ^{[ 79 ]}

ใบอนุญาตที่ได้รับภายใต้ข้อตกลงนี้จะสิ้นสุดลงโดยอัตโนมัติและโดยไม่ต้องแจ้งให้ทราบล่วงหน้า หากคุณ (หรือบริษัทในเครือ บริษัทร่วม หรือตัวแทนของคุณ) เริ่มต้นโดยตรงหรือโดยอ้อม หรือได้รับผลประโยชน์ทางการเงินโดยตรงในการกล่าวอ้างสิทธิบัตรใดๆ: (i) ต่อ Facebook หรือบริษัทในเครือหรือบริษัทร่วมใดๆ ของ Facebook (ii) ต่อบุคคลใดๆ หากการกล่าวอ้างสิทธิบัตรดังกล่าวเกิดขึ้นทั้งหมดหรือบางส่วนจากซอฟต์แวร์ เทคโนโลยี ผลิตภัณฑ์ หรือบริการใดๆ ของ Facebook หรือบริษัทในเครือหรือบริษัทร่วมใดๆ ของ Facebook หรือ (iii) ต่อบุคคลใดๆ ที่เกี่ยวข้องกับซอฟต์แวร์ [...] "การกล่าวอ้างสิทธิบัตร" คือการฟ้องร้องหรือการดำเนินการอื่นใดที่กล่าวหาว่ามีการละเมิดโดยตรง โดยอ้อม หรือมีส่วนร่วมในการละเมิดสิทธิบัตรใดๆ รวมถึงการเรียกร้องแย้งหรือการเรียกร้องโต้แย้ง^{[ 80 ]}

มูลนิธิซอฟต์แวร์ Apacheพิจารณาว่าข้อตกลงการอนุญาตนี้ไม่สอดคล้องกับนโยบายการอนุญาตของตน เนื่องจาก "ส่งต่อความเสี่ยงไปยังผู้บริโภคปลายทางของซอฟต์แวร์ของเราโดยเอื้อประโยชน์ให้กับผู้ให้อนุญาตมากกว่าผู้รับอนุญาต ซึ่งเป็นการละเมิดนโยบายทางกฎหมายของ Apache ที่เป็นผู้บริจาคสากล" และ "ไม่ใช่ส่วนย่อยของสิ่งที่พบใน [Apache License 2.0] และไม่สามารถอนุญาตต่อเป็น [Apache License 2.0] ได้" ^{[ 81 ]}ในเดือนสิงหาคม 2017 Facebook ปฏิเสธข้อกังวลของมูลนิธิ Apache เกี่ยวกับผู้บริโภคปลายทางและปฏิเสธที่จะพิจารณาใบอนุญาตใหม่^{[ 82 ] [ 83 ]}เดือนถัดมาWordPressตัดสินใจเปลี่ยนโครงการ Gutenberg และ Calypso ออกจาก React ^{[ 84 ]}

เมื่อวันที่ 23 กันยายน 2017 Facebook ประกาศว่าในสัปดาห์ถัดไปจะอนุญาตให้ใช้ Flow, Jest, React และ Immutable.js ภายใต้ใบอนุญาต MIT มาตรฐาน โดยบริษัทระบุว่า React เป็น "รากฐานของระบบนิเวศซอฟต์แวร์โอเพนซอร์สสำหรับเว็บที่กว้างขวาง" และพวกเขาไม่ต้องการ "ขัดขวางความก้าวหน้าด้วยเหตุผลที่ไม่ใช่ทางเทคนิค" ^{[ 85 ]}

เมื่อวันที่ 26 กันยายน 2017 React 16.0.0 ได้รับการเผยแพร่ภายใต้ใบอนุญาต MIT ^{[ 86 ]}การเปลี่ยนแปลงใบอนุญาต MIT ยังได้รับการนำกลับมาใช้ในเวอร์ชัน 15.x ด้วย React 15.6.2 ^{[ 87 ]}

• แองกูลาร์ (เฟรมเวิร์กสำหรับเว็บ)
• แบ็คโบน.เจเอส
• เอมเบอร์.เจเอส
• Gatsby (เฟรมเวิร์ก JavaScript)
• เน็กซ์.เจเอส
• ไทป์สคริปต์
• หุ่นเพรียว
• Vue.js
• การเปรียบเทียบเฟรมเวิร์กเว็บที่ใช้ JavaScript
• ส่วนประกอบเว็บ

• เว็บไซต์อย่างเป็นทางการ
• ตอบสนองบนGitHub