SMD blogs

react hooks

SMD OWAIS's photo
SMD OWAIS
·

4 min read

so in app.jsx file we use {} inside the return statment of the function the indicates the value of the variable decleared outside.eg:counter

function App() {
  let counter=15;

  return (
    <>
     <h1>chai aur react</h1>
     <h2>counter:{counter}</h2>

the fulldisclouser of hook:

the actual use of hook:Event Handling: Hooks can also be used in event-driven systems (like GUI applications or server-side systems) to register callbacks or listeners that get triggered when a specific event occurs. so in app.jsx file we can see a very first import statment when imports the hooks from reactfiles. if we see in the we create varaible const, which created varaible in a array format ,which a synatx method of using hook usestate below the

 function app(){
  we create the  follow synatx of hook
  const [counter,setcounter]=usestate(0)
 }

here we see counter is varaible and setcounter is method of updation of the counter variable.is enchance the eventhandling if see it in app.jsx file.

futher in details explantion on hooks In programming, hooks are functions or mechanisms that allow you to insert custom behavior into a system at specific points. They provide a way to extend or modify the functionality of a program without changing its core structure.

Common Uses of Hooks:

  1. React Hooks: In React (a JavaScript library), hooks are functions that let you use state and other React features in functional components. Examples include:

    • useState: Allows you to add state to a functional component.

    • useEffect: Lets you perform side effects like data fetching or DOM manipulation after a component renders.

  2. Web Frameworks: Many frameworks (e.g., Django, Flask) provide hooks that let developers execute custom code at predefined points in the request-response cycle (e.g., before or after a request is handled).

  3. Event Handling: Hooks can also be used in event-driven systems (like GUI applications or server-side systems) to register callbacks or listeners that get triggered when a specific event occurs.

Benefits:

  • Customizability: They enable custom logic without altering the core codebase.

  • Reusability: Hooks allow code reuse by providing predefined entry points.

code app.jsx

In the provided React code, hooks are used to manage state within a functional component. Let's break it down to explain how hooks work in this context:

1. Importing useState Hook:

import { useState } from 'react';
  • The useState hook is imported from React. This hook is essential for adding state to functional components in React. Before hooks were introduced, state could only be used in class components, but with hooks, functional components can now manage their own state.

2. Declaring State with useState:

let [counter, setcounter] = useState(0);

  • The useState(0) function call is used to declare a state variable.

  • counter is the state variable that stores the current value (initially set to 0).

  • setcounter is the setter function that updates the counter state.

  • The value passed to useState(0) (i.e., 0) is the initial value of the state.

  • This line returns an array, where the first element (counter) is the current state value, and the second element (setcounter) is the function used to update it.

3. Using addvalue to Update the State:

const addvalue = () => {
  console.log("value added", counter);
  counter = counter + 1;
  setcounter(counter);
}

  • When the user clicks the "Add value" button, the addvalue function is triggered.

  • Why setcounter is important:

    • Instead of directly modifying the counter variable like counter = counter + 1, we use the setcounter function to properly update the state.

    • setcounter triggers a re-render of the component, so the updated counter value is reflected on the UI.

  • Why not just use counter = counter + 1?

    • Directly modifying the variable won’t trigger a re-render in React, so the UI won't reflect the updated value. React requires state updates to happen via the setter function (setcounter), which tells React to update the component.

4. Using subtracevalue to Decrease the State:

const subtracevalue = () => {
  setcounter(counter - 1);
}
  • The subtracevalue function is similar but decreases the value of counter by 1. Again, setcounter(counter - 1) updates the state.

5. Rendering the State:

<h2>counter:{counter}</h2>
  • The counter variable is displayed inside the <h2> tag, which dynamically updates whenever setcounter is called to change the value of counter.

This is the power of React hooks: they allow functional components to manage their own state and handle updates in a declarative way.

react github

ReactJavaScriptFrontend Development