Skip to main content

React Best Practices

Follow React 19 and modern React patterns.

Hook Dependencies​

Always specify complete dependencies:

useEffect(() => {
  fetchData(id);
}, [id]); // ✅ Include all dependencies

No Inline Components​

Don't define components inside other components:

// ❌ BAD
function Parent() {
  const Child = () => <div>Child</div>;
  return <Child />;
}

// ✅ GOOD
const Child = () => <div>Child</div>;
function Parent() {
  return <Child />;
}

Key Props in Lists​

Always provide key props:

{items.map(item => <Item key={item.id} data={item} />)}

Use Tanstack Query​

For data fetching, use Tanstack Query with TRPC:

const trpc = useTRPC();
const query = useQuery(trpc.tenant.fund.getAll.queryOptions());

See TRPC v11 for usage patterns.