Container Component คือ Component มีการระบุว่าควรจะดึงข้อมูลมาจากที่ไหน การเปลี่ยนแปลงแก้ไขข้อมูลควรจะเป็นอย่างไร เมื่อกดปุ่มนี้แล้วจะต้องส่งข้อมูลหรือเก็บข้อมูลไว้ที่ไหน เป็นต้น

คุณลักษณะของ Container Component

• สนใจว่าสิ่งที่อยู่ในแอพควรจะทำงานอย่างไร เช่น ข้อมูลนี้ควรจะไปดึงมาจากที่ไหน ข้อมูลควรจะแก้ไขข้อมูลอย่างไร คลิกปุ่มนี้แล้วให้ไปหน้าไหนหรือทำอะไรต่อ เป็นต้น
• มี state เก็บไว้ด้านในเนื่องจากตัว Component เองจะต้องเป็นที่เก็บรวบรวมข้อมูล ส่งต่อหรือคืนค่าต่าง ๆ กลับไปไปให้แก่ Component อื่น
• มีหน้าที่เตรียม data และ behevior ทั้งหลายให้กับ Presentational Components หรือ Container Component อื่น (ในเวอร์ชันที่เราสามารถเขียน hooks ได้ เราสามารถมองว่าตัว hooks function ที่มี state อยู่ด้านในเป็น container ก็ย่อมได้)

ขื่อที่คล้ายคลึงกัน Smart Component, Stateful Component

ตัวอย่างโค้ด
ลองมาดูแอพพลิเคชันง่ายตัวหนึ่งที่ชื่อว่า Counter App แอพนี้สามารถเพิ่มเลข ลดเลข และรีเซ็ทค่า count ได้

The simply Counter app can increase, decrease and reset the number
import { useState } from “react”;

const CounterApp = () => {
const [counter, setCounter] = useState(0);
const handleIncrement = () => setCounter(counter + 1);
const handleDecrement = () => setCounter(counter – 1);
const handleReset = () => setCounter(0);

return (
<>
<DisplayCounter counter={counter} />
<CounterController
onIncrementClick={handleIncrement}
onDecrementClick={handleDecrement}
onResetClick={handleReset}
/>
</>
);
};

const DisplayCounter = ({ counter }) => {
return <p>Counter is: {counter}</p>;
};

const CounterController = ({
onIncrementClick,
onDecrementClick,
onResetClick
}) => {
return (
<div>
<button onClick={onIncrementClick}>-1</button>
<button onClick={onDecrementClick}>-1</button>
<button onClick={onResetClick}>Reset</button>
</div>
);
};

export default CounterApp;

อธิบายโค้ดด้านบน มีแอพที่ชื่อ CounterApp ทำหน้าที่

1. DisplayCounter ทำหน้ารับ counter ที่ได้มาจาก props และแสดงผลบนหน้าจอ
2. CounterController ทำหน้าที่รับ callbacks จำนวน 3 ฟังก์ชันได้แก่ onIncrementClick , onDecrementClick , onResetClick และผูกตัว button แต่ละปุ่มไม่ว่าจะเป็น +1 , -1 , reset ให้เรียก callback ที่ได้รับ
3. CounterApp ทำหน้าที่เป็นเสมือนแอพของเราที่หุ้ม Component ทั้งหมดไว้ รวมถึงเก็บ state และ function ที่ทำการเปลี่ยนแปลงค่า state เอาไว้

ถ้าอ่านจากคำอธิบาย Component ด้านบนคงจะพอมองออกว่าอะไรคือ Presentational หรือ Container Component ถ้าใครยังมองไม่ออกไม่เป็นไรครับ เรามาลองมองไปด้วยกัน

1. ดูจากฟังก์ชันที่เห็นผ่านจะเห็นโค้ดส่วนที่ React
2. DisplayCounter ทำหน้าที่เป็น Presentational Component โดยรับเอาค่า counter มาจาก props และแสดงผลบนหน้าจอ โดยตัวเองมีโค้ดที่เก็บ DOM markup ไว้ภายในตัวเอง
3. CounterController ทำหน้าที่เป็น Presentational Component โดยรับเอา callbacks มาจาก props และทำการผูกปุ่มแต่ละปุ่มเข้ากับ callback แต่ละอัน โดยตัวมันเองไม่ได้มีโค้ดที่เกี่ยวกับการเปลี่ยนแปลงค่า counter หากแต่แค่บอกว่าถ้าเกิดคลิกปุ่มนี้จะต้องเรียก callback ไหน
4. CounterApp ทำหน้าที่เป็น Container Component ที่เก็บ Logic ของแอพเราเอาไว้ ทั้งเก็บตัว state เองและสร้าง callback functions ที่ทำหน้าที่เปลี่ยนแปลง state ของ counter ไว้

ประโยชน์ที่รับได้จากการทำตาม Pattern นี้