Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →dokhacgiakhoa/react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features.
Passed 5 of 25 test cases with the skill, and 4 of 25 without it.
1 fixed4 passed either way20 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
We modernized a class context provider into a functional React 18 component, but subscribers re-render on every state update. Here is our provider: ```jsx import React, { useState } from 'react'; export const AuthContext = React.createContext(); export function AuthProvider({ children }) { const [user, setUser] = useState(null); return <AuthContext.Provider value={{ user, setUser }}>{children}</AuthContext.Provider>; } ``` How should this provider be modernized to prevent unnecessary sub-tree re-renders?
| Checked | Without skill | With skill |
|---|---|---|
| Memoizes the context `value` object using `useMemo`. | Passed | Passed |
| Provides verification steps to validate subscriber re-renders. | Missed | Passed |
The instructions your model reads when the skill loads.
Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
resources/implementation-playbook.md.resources/implementation-playbook.md for detailed patterns and examples.test cases passed, vs 4 / 25 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.