Day-53 Today I Created 5 Mini React Projects Using React Hooks

React Hooks make functional components powerful by letting them manage state, lifecycle, refs, routing, and context. In this blog, I’ll walk through 5 mini-projects, each focused on one of the most commonly used hooks:

1. useState
2. useRef
3. useEffect
4. useContext
5. useNavigate

1. Show/Hide Text using useState

The useState hook allows us to store and update local component state. In this project, we toggle a paragraph's visibility using a boolean state.

Code:

import { useState } from 'react'; function ShowHideText() { const [show, setShow] = useState(true); return ( <div> <button onClick={() => setShow(!show)}> {show ? 'Hide' : 'Show'} Text </button> {show && <p>This is some text</p>} </div> ); } export default ShowHideText; 

What it does:

• Displays a button to show or hide text.
• Demonstrates toggling a boolean using useState.

2. Auto Focus Input using useRef

The useRef hook is used to directly access a DOM element. In this project, we automatically focus the input when the component mounts.

Code:

import { useRef, useEffect } from 'react'; function FocusInput() { const inputRef = useRef(); useEffect(() => { inputRef.current.focus(); // Automatically focus input }, []); return <input ref={inputRef} placeholder="Type here" />; } export default FocusInput; 

What it does:

• Uses useRef to reference the input element.
• Uses useEffect to auto-focus the input on load.

3. Display Current Time using useEffect

The useEffect hook runs side-effects like fetching data, setting timers, or DOM manipulation. Here, we use it to show the current time once when the component mounts.

Code:

import { useEffect, useState } from 'react'; function TimeDisplay() { const [time, setTime] = useState(''); useEffect(() => { setTime(new Date().toLocaleTimeString()); }, []); return ( <div> <p>Time: {time}</p> </div> ); } export default TimeDisplay; 

What it does:

• Shows the current time once when component loads.
• Demonstrates useEffect with an empty dependency array [].

4. Access Global Data using useContext

The useContext hook lets you use data from a React context without prop-drilling. In this example, a NameContext provides the name to a child component.

App.js (Context Setup):

import { createContext } from 'react'; import Child from './components/Child'; export const NameContext = createContext(); function App() { return ( <NameContext.Provider value="Tamilselvan"> <Child /> </NameContext.Provider> ); } export default App; 

Child.js:

import { useContext } from 'react'; import { NameContext } from '../../App'; function Child() { const name = useContext(NameContext); return ( <div> <p>Name: {name}</p> </div> ); } export default Child; 

What it does:

• Shares the name across components using Context.
• Avoids passing props manually.

5. Navigation between pages using useNavigate

The useNavigate hook from react-router-dom allows programmatic navigation. We create two pages: Home and About, with buttons to switch between them.

Home.js:

import { useNavigate } from 'react-router-dom'; function Home() { const navigate = useNavigate(); return ( <div> <h2>Home Page</h2> <button onClick={() => navigate('/about')}>Go to About</button> </div> ); } export default Home; 

About.js:

import { useNavigate } from 'react-router-dom'; function About() { const navigate = useNavigate(); return ( <div> <h2>About Page</h2> <button onClick={() => navigate('/')}>Go to Home</button> </div> ); } export default About; 

What it does:

• Navigates between Home and About pages using buttons.
• Uses useNavigate for routing logic.