no-mixing-controlled-and-uncontrolled

Rule category

Correctness.

What it does

Prevents both value and defaultValue prop or both checked and defaultChecked prop on <input />.

Why is this bad?

A <input /> is either controlled or uncontrolled. Mixing controlled and uncontrolled props can lead to bugs and unexpected behavior.

Examples

Failing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return <JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>input React.InputHTMLAttributes<HTMLInputElement>.value?: string | number | readonly string[] | undefinedvalue="1" React.HTMLAttributes<HTMLInputElement>.defaultValue?: string | number | readonly string[] | undefineddefaultVReact.HTMLAttributes<HTMLInputElement>.defaultValue?: string | number | readonly string[] | undefinedalue="2" />;
  //     - Disallow controlled prop and uncontrolled prop being used together.
}

Passing

import React from "react";
 
function function Example1(): React.JSX.ElementExample1() {
  return <JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>input React.InputHTMLAttributes<HTMLInputElement>.value?: string | number | readonly string[] | undefinedvalue="1" />;
}
 
function function Example2(): React.JSX.ElementExample2() {
  return <JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>input React.HTMLAttributes<HTMLInputElement>.defaultValue?: string | number | readonly string[] | undefineddefaultValue="1" />;
}