{"id":23143632,"url":"https://github.com/sh20raj/react-hooksh","last_synced_at":"2025-04-04T12:14:45.158Z","repository":{"id":234048953,"uuid":"783643374","full_name":"SH20RAJ/react-hooksh","owner":"SH20RAJ","description":"🎣 Reeling in React Hooks","archived":false,"fork":false,"pushed_at":"2024-06-08T18:11:20.000Z","size":183,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T06:32:26.555Z","etag":null,"topics":["javascript","react","reacthooks","reactjs"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/react-hooksh","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SH20RAJ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-08T09:41:33.000Z","updated_at":"2024-06-08T18:11:23.000Z","dependencies_parsed_at":"2024-04-18T02:59:35.135Z","dependency_job_id":"3905833b-b63e-40c0-96ab-5f760b8b4761","html_url":"https://github.com/SH20RAJ/react-hooksh","commit_stats":null,"previous_names":["sh20raj/react-hooksh"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Freact-hooksh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Freact-hooksh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Freact-hooksh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SH20RAJ%2Freact-hooksh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SH20RAJ","download_url":"https://codeload.github.com/SH20RAJ/react-hooksh/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174467,"owners_count":20896078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","reacthooks","reactjs"],"created_at":"2024-12-17T15:13:52.476Z","updated_at":"2025-04-04T12:14:45.139Z","avatar_url":"https://github.com/SH20RAJ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 🎣 Reeling in React Hooks\n\n**Introduction:**\nAhoy, React developers! 🌊 Are you ready to dive into the ocean of React Hooks? 🎣 If you've been wondering how to add some serious magic to your functional components, you're in the right place. 🪄 Let's sail through the basics together and get you hooked on Hooks! ⚓️\n\n---\n\n**🎣 Reeling in `useState`: Catching State in Functional Components**\nImagine you're building a simple counter. 🎯 In the old days, you'd need a class component to handle state. But now, with `useState`, it's as easy as pie in a functional component!\n\n```javascript\nimport React, { useState } from 'react';\n\nfunction Counter() {\n  const [count, setCount] = useState(0); // 🎣 Catching the count!\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eYou clicked {count} times\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eClick me\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nNow you've got a `count` state that updates when you click that button! 🎉\n\n---\n\n**🌟 Casting `useEffect`: Side Effects Made Simple**\nSometimes you need to do something after your component renders, like fetching data or setting up a timer. 🕰 That's where `useEffect` comes in!\n\n```javascript\nimport React, { useState, useEffect } from 'react';\n\nfunction Timer() {\n  const [seconds, setSeconds] = useState(0);\n\n  useEffect(() =\u003e {\n    const interval = setInterval(() =\u003e {\n      setSeconds(seconds + 1); // 🌟 Updating the seconds!\n    }, 1000);\n\n    return () =\u003e clearInterval(interval); // 🌊 Cleaning up the interval\n  }, [seconds]); // 🌟 Re-running when seconds change\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eTimer: {seconds}s\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nVoila! 🎩 Now you have a timer that ticks away with `useEffect` magic!\n\n---\n\n**🎨 Painting with `useContext`: Coloring Your Components**\nEver wanted to avoid prop drilling for global data? 🎨 `useContext` to the rescue!\n\n```javascript\nimport React, { useContext } from 'react';\n\nconst ThemeContext = React.createContext('light');\n\nfunction ThemeButton() {\n  const theme = useContext(ThemeContext); // 🎨 Grabbing the theme!\n\n  return \u003cbutton style={{ background: theme }}\u003eThemed Button\u003c/button\u003e;\n}\n\nfunction App() {\n  return (\n    \u003cThemeContext.Provider value=\"dark\"\u003e\n      \u003cThemeButton /\u003e\n    \u003c/ThemeContext.Provider\u003e\n  );\n}\n```\n\nNow you've got a themed button without passing props all the way down! 🚀\n\n---\n\n**🔧 Crafting with `useReducer`: A Redux Alternative**\nFor more complex state management, `useReducer` is your tool! 🛠\n\n```javascript\nimport React, { useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n\nfunction Counter() {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    \u003cdiv\u003e\n      Count: {state.count}\n      \u003cbutton onClick={() =\u003e dispatch({ type: 'increment' })}\u003e+\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e dispatch({ type: 'decrement' })}\u003e-\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nNow you can manage complex state logic with ease! 💪\n\n---\n\n**🔍 Peeking with `useRef`: Getting a Closer Look**\nNeed to access a DOM element directly? 🔍 `useRef` is your magnifying glass!\n\n```javascript\nimport React, { useRef } from 'react';\n\nfunction TextInputWithFocusButton() {\n  const inputEl = useRef(null); // 🔍 Peeking at the input element!\n\n  const onButtonClick = () =\u003e {\n    inputEl.current.focus(); // 🔍 Focusing the input!\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput ref={inputEl} type=\"text\" /\u003e\n      \u003cbutton onClick={onButtonClick}\u003eFocus the input\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nWith `useRef`, you've got direct access to DOM elements! 🎯\n\n---\n\n**⚡️ Conclusion: Your Hooked Journey Begins!**\nArmed with these simple yet powerful React Hooks, you're ready to rock your functional components! ⚡️ Whether it's managing state, handling side effects, or accessing DOM elements, React Hooks have you covered. 🚀 So dive in, explore, and let your React apps flourish with the magic of Hooks! 🌟 Happy coding! 🎉\n\n---\n\nNow you're all set to catch some React Hooks! 🎣 Keep this guide close as you navigate the seas of React development! 🌊 Let me know if you have any questions or need more bait for your React adventures! 😉\n\n\n---\n\n### Practice Time\n\n{% stackblitz react-hooksh %}","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsh20raj%2Freact-hooksh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsh20raj%2Freact-hooksh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsh20raj%2Freact-hooksh/lists"}