React Hooks explained

Hey there! Welcome to this blog where we're gonna talk about React Hooks, those cool things that make React even more awesome! Now, let's keep it real and get into the nitty-gritty of each hook! So, React Hooks are these functions that let you do magic stuff with functional components. No more messy class components with "this" everywhere, phew! 🙅‍♂️ You can now have state and lifecycle logic right inside functional components! Sounds good, right? Let's see what each hook can do. The useState Hook - Like Catching Fish 🎣 First up, useState hook! It's like fishing for state in your functional components, no bait required! 🎣 You can hook in some state and update it without the class confusion. Take a look:

import React, {
	useState
} from 'react';
const Counter = () => {
	const [count, setCount] = useState(0);
	const increment = () => {
		setCount(count + 1);
	};
	return ( < div > < h2 > Lets count together: < /h2><p>{count}</p > < button onClick = {
		increment
	} > Click me! < /button></div > );
};

The useEffect Hook - Roller Coaster Time! 🎢 Now, let's talk useEffect hook - the roller coaster of React's lifecycle! 🎢 You can do side effects, like fetching data or messing with the DOM. No more lifecycle chaos, useEffect handles it all! 🎉

import React, {
    useState,
    useEffect
} from 'react';
const ChuckNorrisFacts = () => {
    const [fact, setFact] = useState('');
    useEffect(() => {
        fetch('https://api.chucknorris.io/jokes/random').then((response) => response.json()).then((data) => setFact(data.value));
    }, []);
    return (< div > < h2 > Did You Know ? < /h2><p>{fact}</p > < /div>   ); }; 

useContext - Sharing is Caring! 🔄 With useContext, you can easily share state between components without prop drilling! 🔄 It's like a secret passage to send data deep down your component tree. useRef - Keep Things Mutable! 🔍 Use useRef to handle mutable values that won't trigger a re-render. It's like having a secret stash where you can keep stuff hidden! 🔍 Custom Hooks - Create Your Own Magic! 🎩 And guess what? You can create your own custom hooks! It's like being a magician who can reuse logic in different components! 🎩 Alright, we've covered the basics of React Hooks - useState, useEffect, useContext, useRef, and custom hooks! These hooks are here to save you from class component mess and make React coding a breeze! Stay hooked, folks! 😉