What is Three.js

• Renderer: Receives Scene and Camera objects and renders the 3D scene as a 2D image.
• Scene Graph: Represents the hierarchical structure of nodes (elements) in the scene.

Major New Features

1. Actions

• Enhanced support for asynchronous functions: By using useTransition, you can automatically manage pending states, error handling, and optimistic updates in asynchronous functions.

const [isPending, startTransition] = useTransition()

const handleSubmit = () => {
  startTransition(async () => {
    const error = await updateName(name)
    if (error) {
      setError(error)
      return
    }
    redirect('/path')
  })
}

2. New Hook: useActionState

• Easily handle common cases of Actions: Manage the results of asynchronous actions, pending states, errors, and more.

const [error, submitAction, isPending] = useActionState(
  async (prevState, formData) => {
    const error = await updateName(formData.get('name'))
    if (error) return error
    redirect('/path')
    return null
  },
  null
)

3. React DOM:
   Actions and useFormStatus

• Pass functions as action and formAction props: Automatically manage form submissions and reset the form after submission.

Closures are a fundamental concept in JavaScript.

It’s a concept that is often asked about in technical interviews, and I remember memorizing it while preparing for my own technical interviews.

However, I didn’t quite understand how closures are used in practice, and I often pondered how to apply them effectively. This time, I want to study the concept of closures in more depth.

Problem

When passing a function as a parameter to customHook, let’s observe how the state value inside the function is output when the useCustom component is unmounted.