Sh Raj๐ฃ 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!
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // ๐ฃ Catching the count!
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
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!
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 (
<div>
<p>Timer: {seconds}s</p>
</div>
);
}
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!
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemeButton() {
const theme = useContext(ThemeContext); // ๐จ Grabbing the theme!
return <button style={{ background: theme }}>Themed Button</button>;
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemeButton />
</ThemeContext.Provider>
);
}
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! ๐
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 (
<div>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}
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!
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 (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
}
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 ๐ฐ๏ธ | GitHub Repo
