Teachnique
      CourseRoadmaps
      Login

      useStateuseEffectuseLayoutEffectuseReduceruseRefforwardRefuseContextClosure Trap in Hooks

      Feedback

      Submit request if you have any questions.

      Course
      useState

      React Mastery Guide

      Unlock the full potential of React with our comprehensive guide. From basics to advanced techniques, this course covers everything you need to build dynamic, high-performance web applications. Perfect for developers at any level, start mastering React today!

      Instructions

      
      React components can be written in either class or function components, but nowadays, function components are predominantly used. The official documentation has even categorized class components under the legacy section.
      
      Therefore, unless you're maintaining legacy code that uses class components, there's no need to focus on those methods. Function components primarily involve learning various hooks.
      In this section, we'll go over the commonly used hooks.
      
      First, let's create a project using create-react-app:
      npx create-react-app --template typescript hook-test
      
      In index.tsx, comment out these three lines of code:
      
      React.StrictMode causes additional renders, and the performance reporting below is built into CRA, which we don't need.
      
      Then modify App.tsx to use the first hook: useState.
      import { useState } from "react";
      
      function App() {
        const [num, setNum] = useState(1);
      
        return (
          <div onClick={() => setNum(num + 1)}>{num}</div>
        );
      }
      
      export default App;

      useState

      

      What is state?

      Data such as 111, 'xxx', or { a: 1 } are referred to as data. They can be of various data types but remain fixed and immutable.
      When data transforms from one form to another, such as changing from { a: 1 } to { a: 2 }, this transformation is known as state. In simpler terms, state represents mutable data and forms the core of a component.
      
      Interactions such as clicking and dragging alter the state, leading to re-renders triggered by these changes in state.
      
      
      
      Component-level state is created using useState. For managing the state of the entire application, you can use a global state management library like Redux.
      While state is fundamental, it is the core of front-end applications.
      
      Now, let's go back and run the code from above:
      
      

      Try it out on the on-line editor

      
      
      The initial state is initially set to 1 and can be changed by clicking, which is straightforward.
      
      If the initial state requires complex calculations, you can pass a function to compute the initial value. This function should only contain synchronous logic; asynchronous operations are not supported.
      
      useState returns an array containing the state and a setXxx API. We usually use destructuring syntax to access them.
      The setXxx API also accepts two types of parameters:
      You can either pass a new value directly like setNum(10) or pass a function that returns the new value. This function's parameter is the previous state. 
      function App() {
        const [num, setNum] = useState(() => {
          const num1 = 1 + 2;
          const num2 = 2 + 3;
          return num1 + num2
      });
        return (
          <>
            <h1>React Hooks</h1>
            <div className="card">
              <button onClick={() => setNum((preNum => preNum + 1))}>
                count is {num}
              </button>
              <p>
                Edit <code>src/App.tsx</code> and save to test Hooks
              </p>
            </div>
            <p className="read-the-docs">
              Click on the Vite and React logos to learn more
            </p>
          </>
        );
      }
      

      Let's try it out!