https://github.com/sh20raj/react-hooksh
🎣 Reeling in React Hooks
https://github.com/sh20raj/react-hooksh
javascript react reacthooks reactjs
Last synced: 9 months ago
JSON representation
🎣 Reeling in React Hooks
- Host: GitHub
- URL: https://github.com/sh20raj/react-hooksh
- Owner: SH20RAJ
- Created: 2024-04-08T09:41:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-08T18:11:20.000Z (over 1 year ago)
- Last Synced: 2025-03-22T06:32:26.555Z (9 months ago)
- Topics: javascript, react, reacthooks, reactjs
- Language: JavaScript
- Homepage: https://stackblitz.com/edit/react-hooksh
- Size: 179 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🎣 Reeling in React Hooks
**Introduction:**
Ahoy, 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! ⚓️
---
**🎣 Reeling in `useState`: Catching State in Functional Components**
Imagine 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!
```javascript
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 🎣 Catching the count!
return (
You clicked {count} times
setCount(count + 1)}>Click me
);
}
```
Now you've got a `count` state that updates when you click that button! 🎉
---
**🌟 Casting `useEffect`: Side Effects Made Simple**
Sometimes you need to do something after your component renders, like fetching data or setting up a timer. 🕰 That's where `useEffect` comes in!
```javascript
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(seconds + 1); // 🌟 Updating the seconds!
}, 1000);
return () => clearInterval(interval); // 🌊 Cleaning up the interval
}, [seconds]); // 🌟 Re-running when seconds change
return (
Timer: {seconds}s
);
}
```
Voila! 🎩 Now you have a timer that ticks away with `useEffect` magic!
---
**🎨 Painting with `useContext`: Coloring Your Components**
Ever wanted to avoid prop drilling for global data? 🎨 `useContext` to the rescue!
```javascript
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemeButton() {
const theme = useContext(ThemeContext); // 🎨 Grabbing the theme!
return Themed Button;
}
function App() {
return (
);
}
```
Now you've got a themed button without passing props all the way down! 🚀
---
**🔧 Crafting with `useReducer`: A Redux Alternative**
For more complex state management, `useReducer` is your tool! 🛠
```javascript
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
Count: {state.count}
dispatch({ type: 'increment' })}>+
dispatch({ type: 'decrement' })}>-
);
}
```
Now you can manage complex state logic with ease! 💪
---
**🔍 Peeking with `useRef`: Getting a Closer Look**
Need to access a DOM element directly? 🔍 `useRef` is your magnifying glass!
```javascript
import React, { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null); // 🔍 Peeking at the input element!
const onButtonClick = () => {
inputEl.current.focus(); // 🔍 Focusing the input!
};
return (
Focus the input
);
}
```
With `useRef`, you've got direct access to DOM elements! 🎯
---
**⚡️ Conclusion: Your Hooked Journey Begins!**
Armed 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! 🎉
---
Now 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! 😉
---
### Practice Time
{% stackblitz react-hooksh %}