🔖 หมวดบทเรียน: การเพิ่มความสะดวกและลดโค้ดซ้ำด้วย Custom Hooks ใน Riverpod
📌 เหมาะสำหรับ: ผู้ที่ใช้ Riverpod อยู่แล้ว และต้องการโครงสร้างที่สะอาดและ maintain ง่ายขึ้น
🎯 เป้าหมาย: สร้างและใช้งาน Custom Hook ใน Riverpod เพื่อจัดการ State หรือ Logic ซ้ำ ๆ แบบ reusable
🧭 เกริ่นนำ
เมื่อเราจัดการ State ด้วย Riverpod หลาย ๆ ครั้งจะพบว่าโค้ดบางส่วนซ้ำกัน เช่น ดึงข้อมูล, debounce, หรือ setup controller ต่าง ๆ การสร้าง Custom Hook จะช่วยให้แยก logic เหล่านั้นออกมาใช้งานซ้ำได้ และทำให้ ConsumerWidget
หรือ HookConsumerWidget
สะอาดขึ้นมาก
⚙️ ติดตั้ง flutter_hooks
dependencies:
flutter_hooks: ^0.20.5
hooks_riverpod: ^2.5.1
🧪 สร้าง HookConsumerWidget
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
class HomePage extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final counter = useState(0);
return Scaffold(
body: Center(
child: Column(
children: [
Text('นับ: \${counter.value}'),
ElevatedButton(
onPressed: () => counter.value++,
child: Text('เพิ่ม'),
)
],
),
),
);
}
}
🧰 สร้าง Custom Hook: useDebounce
import 'package:flutter_hooks/flutter_hooks.dart';
ValueNotifier<T> useDebounce<T>(T initialValue, Duration delay) {
final state = useState<T>(initialValue);
final debounced = useState<T>(initialValue);
useEffect(() {
final timer = Timer.periodic(delay, (_) {
debounced.value = state.value;
});
return timer.cancel;
}, [state.value]);
return state;
}
🎯 การใช้งาน
final keyword = useDebounce<String>('', Duration(milliseconds: 300));
✅ สรุป
- ใช้
flutter_hooks
และhooks_riverpod
เพื่อจัดการ State แบบ declarative - Custom Hook ช่วยแยก logic ซ้ำออกมาใช้งานซ้ำได้หลาย widget
- ทำให้โค้ดเรียบร้อยและ maintain ได้ง่ายขึ้น
บทถัดไปเราจะไปเรียนรู้ การทำ Responsive Layout และ Adaptive UI เพื่อให้แอปใช้งานได้ดีในทุกขนาดหน้าจอ