React Learning Journey – Day 3 Blog

#webdev #javascript #react #learning

Hello Everyone!!

Today’s session was really interesting because we learned about one of the most important concepts in React – Hooks. Let’s understand each topic step by step in a simple and clear way.

1.Introduction to Hooks:

Hooks are special functions in React. They let us "hook into" React features like state and lifecycle methods in functional components.
Before Hooks, only class components could use state, but now functional components can do everything with the help of Hooks!

2.What is a Hook?

A Hook is a JavaScript function that allows you to use React features (like state, context, refs) inside a functional component.

Note: Hooks only work in functional components, not in regular JavaScript functions or class components.

3.Why use Hooks? (Benefits of Hooks)

Easy to use state and lifecycle methods in functional components.
Avoid writing class components.
Code becomes cleaner, shorter, and more readable.
You can reuse stateful logic using custom hooks.

4.Types of Hooks

React provides some built-in hooks like:

useState()
useEffect()
useContext(), etc.

In today's class, we focused on useState()

5.What is useState()?

useState() is the most used React Hook.
It lets you add and manage state in a functional component.

Syntax:

const [stateVariable, setStateFunction] = useState(initialValue);

stateVariable: To hold the data.
setStateFunction: To update the data.
initialValue: The starting value of the state.

6.Example of useState():

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Initial value is 0

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

export default Counter;