From dc451e68fc86a5de3750ec0aaa0b945a467672e0 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 12 Aug 2022 19:48:32 +0400
Subject: [PATCH] Add the hooks docs

---
 .../108-basic-hooks/100-use-state.md                      | 8 +++++++-
 .../108-basic-hooks/101-use-effect.md                     | 7 ++++++-
 .../108-basic-hooks/readme.md                             | 8 +++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md
index a993ad7b6..6350e3e37 100644
--- a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md
+++ b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md
@@ -1 +1,7 @@
-# Use state
\ No newline at end of file
+# useState Hook
+
+`useState` hook is used to manage the state of a component in functional components. Calling `useState` returns an array with two elements: the current state value and a function to update the state.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-state.html'>Using the State Hook</BadgeLink>
+
diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md
index 127d9fc54..354a583f8 100644
--- a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md
+++ b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md
@@ -1 +1,6 @@
-# Use effect
\ No newline at end of file
+# useEffect Hook
+
+`useEffect` is a special hook that lets you run side effects in React. It is similar to componentDidMount and componentDidUpdate, but it only runs when the component (or some of its props) changes.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-effect.html'>Using the Effect Hook</BadgeLink>
diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md
index 35debfe17..937242e37 100644
--- a/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md
+++ b/content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md
@@ -1 +1,7 @@
-# Basic hooks
\ No newline at end of file
+# React Hooks
+
+Hooks were introduced in React 16.8 and they let us use state and other React features without writing a class
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-intro.html'>Introduction to Hooks</BadgeLink>
+