My Learning Blog

React Hook - 2/28/2024

About some tips about useful hook


—useId is a React Hook for generating unique IDs that can be passed to accessibility attributes.

In React, components can be reused multiple times, which means an ID that is unique in a single instance of a component might not be unique when the component is used multiple times on a page.

The useId hook generates a unique ID that is stable across server and client rendering, making it perfect for cases where you need a unique identifier for elements within components, particularly in scenarios involving accessibility, form controls, and labels.

Math.random() can be used for generating unique IDs in simpler, client-only rendering scenarios, it’s generally not recommended for complex applications, especially those using SSR or needing stable identifiers across re-renders. Using React’s useId hook or other deterministic ID generation methods is a more reliable and efficient approach.


In React, a ref is a feature that allows you to access the underlying DOM nodes or React elements directly.Changes to refs do not trigger re-renders. They’re a way to interact with DOM nodes or React elements directly outside the regular data flow.

Refs are an escape hatch. You should only use them when you have to “step outside React”. Common examples of this include managing focus, scroll position, or calling browser APIs that React does not expose.

useRef returns an object with a single property:current

current: Initially, it’s set to the initialValue you have passed. You can later set it to something else. If you pass the ref object to React as a ref attribute to a JSX node, React will set its current property.On the next renders, useRef will return the same object.You instruct React to put a DOM node into myRef.current by passing by passing “myRef” as a prop to a React element using the ref attribute.

When you change the ref.current property, React does not re-render your component. React is not aware of when you change it because a ref is a plain JavaScript object.

By using a ref, you ensure that:

Do not write or read ref.current during rendering.

function MyComponent() {
  // ...
  // 🚩 Don't write a ref during rendering
  myRef.current = 123;
  // ...
  // 🚩 Don't read a ref during rendering
  return <h1>{myOtherRef.current}</h1>;

You can read or write refs from event handlers or effects instead ,and also use the built-in browser APIs defined on it.

function MyComponent() {
  // ...
  useEffect(() => {
    // ✅ You can read or write refs in effects
    myRef.current = 123;
  // ...
  function handleClick() {
    // ✅ You can read or write refs in event handlers
  // ...

useEffect(setup, dependencies?)

You need to pass two arguments to useEffect:

A setup function with setup code that connects to that system.

It should return a cleanup function with cleanup code that disconnects from that system.

A list of dependencies including every value from your component used inside of those functions.

React calls your setup and cleanup functions whenever it’s necessary, which may happen multiple times:



Key Differences between useMemo and useCallback

What They Memoize: The key difference lies in what they are used for memoizing. useMemo is for memoizing values resulting from a function, while useCallback is for memoizing the function itself.

Use Cases: Use useMemo to avoid expensive calculations on every render. Use useCallback to pass stable functions to components that require them, thus preventing unnecessary re-renders due to function reference changes.