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.

---