What is the correct way of passing the initialiser function to useState?

You need to initialize a counter state to the result of a heavy calculation. How would you use useState to ensure the calculation runs only once?

If you write const [value, setValue] = useState(expensiveFn()); what happens on each render, and how would you fix it?

In a feature you added a list component that fetches data and stores it in state using useState. The fetch function is memoized, but you notice the fetch runs on every render. Walk me through why that might be and how you'd change the useState call.

You refactored a component to use a lazy initializer for state, but the UI sometimes shows stale data after a prop change. Explain the trade‑offs of using a lazy initializer here and how you'd handle updates.

Your team is building a dashboard with many widgets, each initializing large data structures with useState. How would you decide when to use a lazy initializer versus moving the computation outside React, considering performance and memory?

During a code review you see a component that calls useState(() => computeInitial()) inside a loop that renders multiple instances. What are the implications at scale, and how would you redesign it to avoid unnecessary work?

The product is migrating a legacy codebase of class components to functional components. You need to establish a guideline for initializing state that may involve expensive calculations. What policy would you set for using lazy initializers, and how would you enforce it across multiple teams?

A cross‑team performance incident was traced to many components recomputing heavy defaults on every render. Describe how you would architect a shared utility or pattern to centralize lazy initialization and ensure consistency.