9) Typescript Hooks

useState
useState is used to store and update component state.

import React, { useState } from "react";

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>Count: {count}</h2>

      <button onClick={increment}>
        Increment
      </button>
    </div>
  );
};

export default Counter;

Type Inference
TypeScript automatically infers the type.

const [name, setName] = useState("Rahul");
// is equivalent to
const [name, setName] = useState<string>("Rahul");

Common Types

// String
const [username, setUsername] = useState<string>("");

// Number
const [age, setAge] = useState<number>(25);

// Boolean
const [loading, setLoading] = useState<boolean>(false);

// Object
interface User {
  name: string;
  age: number;
}

const [user, setUser] = useState<User>({
  name: "",
  age: 0,
});

// Array
const [items, setItems] = useState<string[]>([]);

useEffect is used for side effects such as: API calls, Timers, DOM updates, Event listeners, Subscriptions

import React, { useEffect, useState } from "react";

interface User {
  id: number;
  name: string;
}

const Users: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <div>
      {users.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
};

export default Users;

useRef
useRef is used for: Accessing DOM elements, Persisting mutable values and Avoiding re-renders.

import React, { useRef } from "react";

const InputFocus: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

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

      <button onClick={focusInput}>
        Focus Input
      </button>
    </div>
  );
};

export default InputFocus;

useMemo
useMemo memoizes expensive calculations. It prevents recalculating values on every render.

import React, { useMemo, useState } from "react";

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState<number>(0);
  const [text, setText] = useState<string>("");

  const expensiveCalculation = (num: number) => {
    console.log("Calculating...");

    for (let i = 0; i < 1000000000; i++) {}

    return num * 2;
  };

  const result = useMemo(() => {
    return expensiveCalculation(count);
  }, [count]);

  return (
    <div>
      <h2>Result: {result}</h2>

      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>

      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    </div>
  );
};

export default ExpensiveComponent;

useCallback
useCallback memoizes functions. It prevents function recreation on every render.

import React, { useCallback, useState } from "react";

interface ChildProps {
  onClick: () => void;
}

const Child: React.FC<ChildProps> = React.memo(({ onClick }) => {
  console.log("Child Rendered");

  return (
    <button onClick={onClick}>
      Click
    </button>
  );
});

const Parent: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []);

  return (
    <div>
      <h2>{count}</h2>

      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>

      <Child onClick={handleClick} />
    </div>
  );
};

export default Parent;