反应阻止子更新

Question

I have a simple for with some fields in it, the fields being child components to that form. Each field validates its own value, and if it changes it should report back to the parent, which causes the field to re-render and lose focus. I want a behavior in which the child components do not update. Here's my code:

Parent (form):

function Form() {

    const [validFields, setValidFields] = useState({});

    const validateField = (field, isValid) => {
        setValidFields(prevValidFields => ({ ...prevValidFields, [field]: isValid }))
    }

    const handleSubmit = (event) => {
        event.preventDefault();
        //will do something if all fields are valid
        return false;
    }

    return (
        <div>
            <Title />
            <StyledForm onSubmit={handleSubmit}>
                <InputField name="fooField" reportState={validateField} isValidCondition={fooRegex} />
                <Button type="submit" content="Enviar" maxWidth="none" />
            </StyledForm>
        </div>
    );
}

export default Form;

Child (field):

function InputField(props) {

    const [isValid, setValid] = useState(true);
    const [content, setContent] = useState("");
    const StyledInput = isValid ? Input : ErrorInput;

    const validate = (event) => {
        setContent(event.target.value);
        setValid(stringValidator.validateField(event.target.value, props.isValidCondition))
        props.reportState(props.name, isValid);
    }

    return (
        <Field>
            <Label htmlFor={props.name}>{props.name + ":"}</Label>
            <StyledInput
                key={"form-input-field"}
                value={content}
                name={props.name}
                onChange={validate}>
            </StyledInput>
        </Field>
    );
}

export default InputField;

By setting a key for my child element I was able to prevent it to lose focus when content changed. I guess I want to implement the shouldComponentUpdate as stated in React documentation , and I tried to implement it by doing the following:

Attempt 1: surround child with React.memo

const InputField = React.memo((props) {
    //didn't change component content
})

export { InputField };

Attempt 2: intanciate child with useMemo on parent

const fooField = useMemo(<InputField name="fooField" reportState={validateField} isValidCondition={fooRegex} />, [fooRegex]);

    return (
        <div>
            <Title />
            <StyledForm onSubmit={handleSubmit}>
                {fooField}
                <Button type="submit" content="Enviar" maxWidth="none" />
            </StyledForm>
        </div>
    );

Both didn't work. How can I make it so that when the child component isValid state changes, it doesn't re-render?

Answer 1

The problem is not that the component is re-rendering, it is that the component is unmounting given by this line:

const StyledInput = isValid ? Input : ErrorInput;

When react unmounts a component, react-dom will destroy the subtree for that component which is why the input is losing focus.

The correct fix is to always render the same component. What that means to you is based on how your code is structured, but I would hazard a guess that the code would end up looking a bit more like this:

function InputField(props) {

    const [isValid, setValid] = useState(true);
    const [content, setContent] = useState("");

    const validate = (event) => {
        setContent(event.target.value);
        setValid(stringValidator.validateField(event.target.value, props.isValidCondition))
        props.reportState(props.name, isValid);
    }

    return (
        <Field>
            <Label htmlFor={props.name}>{props.name + ":"}</Label>
            <Input
                valid={isValid} <-- always render an Input, and do the work of displaying error messages/styling based on the `valid` prop passed to it
                value={content}
                name={props.name}
                onChange={validate}>
            </Input>
        </Field>
    );
}

Answer 2

The canonical solution to avoiding rerendering with function components is React.useMemo :

const InputField = React.memo(function (props) {
    // as above
})

However, because validateField is one of the props passed to the child component, you need to make sure it doesn't change between parent renders. UseuseCallback to do that:

    const validateField = useCallback((field, isValid) => {
        setValidFields(prevValidFields => ({ ...prevValidFields, [field]: isValid }))
    }, []);

Your useMemo solution should also work, but you need to wrap the computation in a function (see the documentation ):

const fooField = useMemo(() => <InputField name="fooField" reportState={validateField} isValidCondition={fooRegex} />, [fooRegex]);