CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/react-patterns

React patterns — always apply error boundaries, loading states, accessible markup, proper hooks, controlled forms, stable keys, and correct memoization

87

1.83x
Quality

80%

Does it follow best practices?

Impact

99%

1.83x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

task.mdevals/scenario-4/

User Profile Editor

Build a user profile edit form in React with TypeScript. The form lets users update their name, email address, and bio. It receives the current profile data as a prop and calls an onSave callback with the updated data.

The onSave callback is async and returns a Promise (simulating an API call). While saving, the form should indicate that submission is in progress.

Output

Produce TypeScript/TSX files in a src/ directory:

  • src/types.ts -- TypeScript type definitions for the profile data and component props
  • src/components/ProfileForm.tsx -- the profile edit form component

The component receives props: profile: Profile (current data) and onSave: (data: Profile) => Promise<void>. Do not include test files or build configuration.

evals

tile.json