What happens to the component when the key changes? Explain the lifecycle of functional components.

When the key of a component in React changes, it causes the old component to unmount and a new one to mount. This is because key is used by React to identify components in lists and optimize rendering.

If the key changes, React considers it a completely different component, so:

• The old component's componentWillUnmount method is called (for class components) or effects are cleaned up (for functional components).
• The new component is created anew, and lifecycle methods or effects are invoked.

The lifecycle of functional components in React with hooks:

1. Mounting:

   • The component function is executed.
   • Effects with useEffect without dependencies or with an empty dependency array are run.

2. Updating:

   • The component is re-invoked when props or state change.
   • Effects with changed dependencies are executed.

3. Unmounting:

   • The cleanup function from useEffect is executed (if provided).

Example with useEffect:

useEffect(() => {
  // effect code
  return () => {
    // cleanup on unmount or before next effect
  };
}, [dependencies]);

Thus, changing the key leads to the complete re-creation of the component, affecting its lifecycle.