top of page

React Hooks explained

Updated: Jul 26, 2023

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! ๐Ÿ˜‰


3 views0 comments

Recent Posts

See All

I'm a lead software developer currently working at AG Grid in London.

Technologies I'm currently focused on include Salesforce, .NET Core, Angular, SQL, React and Azure.

Other than that, in my spare time I watch the Arsenal at the Emirates, work on side projects or watch sports. Oh, and I'm also a part-time body builder.

You can contact me at vh@viqas.co.uk

profile.jpg

About Viqas Hussain

bottom of page