Planning and ReAct Loops

Advanced Planning and ReAct Loops in Agentic AI with .NET Tutorial. Deep dive with production-oriented examples—not a shallow overview.

Architecture & mental model

React hooks attach state and side effects to function components. Rules: only call hooks at top level, only from React functions. useEffect syncs with external systems—dependencies must be complete to avoid stale closures.

Implementation (production-style)

Type the code below; change names and types to match your domain. Compare with how Semantic Kernel teams structure layers in mature codebases.

import { useState, useEffect, useCallback } from 'react';

export function UserList() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);

  const reload = useCallback(async () => {
    setError(null);
    try {
      const res = await fetch('/api/users');
      if (!res.ok) throw new Error('Failed');
      setUsers(await res.json());
    } catch (e) {
      setError(e.message);
    }
  }, []);

  useEffect(() => { reload(); }, [reload]);

  if (error) return 
{error}
;
  return 
{users.map(u => 
{u.name}
)}
;
}

Decision checklist

• Requirements: What are latency, consistency, and security needs for "Planning and ReAct Loops"?
• Boundaries: Which layer owns this logic (UI, API, domain, infrastructure)?
• Failure modes: What happens when dependencies time out or return partial data?
• Observability: What logs or metrics prove this feature works in production?

Hands-on lab (45–60 min)

1. Reproduce the primary example for "Planning and ReAct Loops" in a scratch project using Semantic Kernel.
2. Add one automated test (unit or integration) that would fail if you break the core behavior.
3. Introduce a deliberate bug (wrong lifetime, missing await, wrong dependency order) and observe the symptom.
4. Document one trade-off you would present in a design review.

Pitfalls senior engineers avoid

• Missing dependency arrays.
• Deriving state that should be computed during render.
• Huge effects that should split or use custom hooks.

Interview depth

Question: Explain Planning and ReAct Loops to a junior developer in 2 minutes, then list two trade-offs.

Strong answer: Start with the problem it solves, describe one real project usage, mention a failure you debugged or would test for, and close with alternatives (when not to use this approach).

Summary

You completed an advanced treatment of Planning and ReAct Loops. Revisit after building a feature that uses it end-to-end; spaced repetition with real code beats re-reading alone.