More React Hooks

Introduction

React Hooks allow you to use state and other React features in functional components. This guide covers the basics of React Hooks, introduces additional hooks, and demonstrates how to use Axios for data fetching and React Router for routing.

Setting Up the Environment

Create a React project:

shCopy code
npx create-react-app my-app
cd my-app
npm start

Install necessary dependencies:

shCopy code
npm install axios react-router-dom

React Hooks

useState Hook:

The useState hook allows you to add state to functional components.

Example:

javascriptCopy code
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

useEffect Hook:

The useEffect hook allows you to perform side effects in functional components.

Example:

javascriptCopy code
import React, { useEffect, useState } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Seconds: {seconds}</p>;
};

export default Timer;

useContext Hook:

The useContext hook provides a way to pass data through the component tree without prop drilling.

Example:

javascriptCopy code
import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext(null);

const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'John Doe' });

  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

const UserProfile = () => {
  const user = useContext(UserContext);

  return <p>User: {user.name}</p>;
};

const App = () => (
  <UserProvider>
    <UserProfile />
  </UserProvider>
);

export default App;

useReducer Hook:

The useReducer hook is used for managing complex state logic.

Example:

javascriptCopy code
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();
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Using Axios for Data Fetching

Axios is a popular HTTP client for making requests.

Fetching Data with Axios:

Example:

javascriptCopy code
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const DataFetcher = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetcher;

Using React Router for Routing

React Router allows you to implement dynamic routing in a web app.

Setting Up Routes:

Example:

javascriptCopy code
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Users = () => <h2>Users</h2>;

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  </Router>
);

export default App;

Additional Hooks

useRef Hook:

The useRef hook is used to persist values between renders without causing a re-render.

Example:

javascriptCopy code
import React, { useRef, useEffect } from 'react';

const FocusInput = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
};

export default FocusInput;

useMemo Hook:

The useMemo hook is used to memoize expensive calculations.

Example:

javascriptCopy code
import React, { useState, useMemo } from 'react';

const ExpensiveCalculation = ({ num }) => {
  const expensiveCalculation = useMemo(() => {
    console.log('Calculating...');
    return num * 2;
  }, [num]);

  return <div>Result: {expensiveCalculation}</div>;
};

const App = () => {
  const [number, setNumber] = useState(1);

  return (
    <div>
      <button onClick={() => setNumber(prev => prev + 1)}>Increment</button>
      <ExpensiveCalculation num={number} />
    </div>
  );
};

export default App;

useCallback Hook:

The useCallback hook returns a memoized callback function.

Example:

javascriptCopy code
import React, { useState, useCallback } from 'react';

const Button = React.memo(({ handleClick }) => {
  console.log('Button rendered');
  return <button onClick={handleClick}>Click me</button>;
});

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <Button handleClick={handleClick} />
    </div>
  );
};

export default App;

Conclusion

React Hooks simplify state management and side effects in functional components, making your React code more readable and maintainable. Combining Hooks with Axios for data fetching and React Router for routing enables you to build powerful, modern web applications. Start exploring these hooks to enhance your React development skills!

More React Hooks

Introduction​

Setting Up the Environment​

React Hooks​

Using Axios for Data Fetching​

Using React Router for Routing​

Additional Hooks​

Conclusion​

Introduction

Setting Up the Environment

React Hooks

Using Axios for Data Fetching

Using React Router for Routing

Additional Hooks

Conclusion