إعادة استخدام منطق الحالة بإستخدام Custom Hook

ال Custom Hook دالة يبدأ إسمها بكلمة use وبتجمع منطق يعتمد على Hooks

المثال داخل مشروع React يدعم JSX و Hooks

تطبيق الفكرة

كل استدعاء بيحتفظ بحالة مستقلة ومش بيشارك الحالة تلقائيا

ملف App.jsx

import { useState } from "react";
function useToggle(initial = false) {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(previous => !previous);
  return [value, toggle];
}
export default function App() {
  const [visible, toggle] = useToggle();
  return <><button onClick={toggle}>Toggle</button><p>{visible ? "Visible" : "Hidden"}</p></>;
}

النتيجة

الزر بيبدل الرسالة بين Hidden و Visible

ملحوظة

استدعي Hooks في المستوى الأعلى من المكون أو Hook أخرى ومن غير شروط أو حلقات