Fun useRef

[reboottime]

For Fun

For code bellow

import { useEffect, useRef } from 'react';


export default function App() {
  return (
    <>
      <UserExample />
      <UserExample />
    </>
  );
}

const UserExample = () => {
  const user = useUser('kate');

  return <div>{user?.name ?? 'kate'}</div>;
};

const useUser = (name: string) => {
  const userRef = useRef<User | null>(null);

  useEffect(() => {
    let user = userRef.current;
    if (!user) {
      userRef.current = new User(name);
      user = userRef.current;
    }
  }, [name]);

  return userRef.current;
};

class User {
  name: string;
  constructor(name: string) {
    this.name = name;
    console.info('initialize user instance');
  }
}

How many User instance was intiated?

• A0: 0
• A1: 1
• A2: 2

(: