Closed as not planned
Description
The current ESLint error message for invalid hook usage (e.g., calling hooks conditionally) is not very descriptive. It fails to explain why the error occurred or provide guidance on how to fix it. This can be particularly confusing for beginners, who may not understand the rules of hooks.
React version: 19.0.0
Steps To Reproduce
- Create a React component with the following code
function UserForm() {
const [userType, setUserType] = useState('student');
if (userType === 'student') {
const [studentId, setStudentId] = useState('');
} else if (userType === 'teacher') {
const [teacherId, setTeacherId] = useState('');
}
return (
<div>
<h2>User Form</h2>
<label>
Select User Type:
<select value={userType} onChange={(e) => setUserType(e.target.value)}>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
</select>
</label>
{userType === 'student' && (
<div>
<label>
Student ID:
<input
type="text"
value={studentId}
onChange={(e) => setStudentId(e.target.value)}
/>
</label>
</div>
)}
{userType === 'teacher' && (
<div>
<label>
Teacher ID:
<input
type="text"
value={teacherId}
onChange={(e) => setTeacherId(e.target.value)}
/>
</label>
</div>
)}
</div>
);
}
export default UserForm;
- The error message you’ll see is
React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render
The current behavior
The error message is generic and doesn't provide enough detail
The expected behavior
The error message could include
- A clear explanation of why the error occurred (e.g., hooks cannot be used inside loops, conditions, or nested functions).
- A link to the React Hooks documentation for further reading.