In a React component, why is calling this.setState() inside render() discouraged?

In a React component, why is calling this.setState() inside render() discouraged?

• A. Because render runs after the state has changed, so it would be out of sync.
• B. Because setState is not a function available in render.
• C. Because calling setState inside render would cause an infinite loop.
• D. Because React will automatically throw an error in this case.

Answer: (C)

Updating state during rendering breaks the idea that render is a pure function of props and state. Calling the state setter inside render schedules a new state change, which forces another render. that loop keeps running because each render triggers another render, leading to an infinite re-render cycle. That’s why it’s discouraged—React can get stuck re-rendering forever and the UI can freeze or crash. If you need to derive values for rendering, compute them directly in render or with memoization. If you need to update state, do it in a lifecycle method (or in a useEffect in function components) where side effects belong, not during rendering.

Updating state during rendering breaks the idea that render is a pure function of props and state. Calling the state setter inside render schedules a new state change, which forces another render. that loop keeps running because each render triggers another render, leading to an infinite re-render cycle. That’s why it’s discouraged—React can get stuck re-rendering forever and the UI can freeze or crash.

If you need to derive values for rendering, compute them directly in render or with memoization. If you need to update state, do it in a lifecycle method (or in a useEffect in function components) where side effects belong, not during rendering.