React Hooks-我是否应该将“ useState”用于不变的状态？

Question

When I initially learned React Component's I was always told to put everything in this.state . Whether it be some pieces of data that update frequently or some that never update at all.

However, with the implementation of React hooks, I'm not sure how frequently I should use useState even when the state will not update.

Let me give you an example of some of my form logic:

const FormAuth = props => {
    //Frequently updates
    const [validInput, setValidInput] = useState({
        isCompletedForm: Boolean,
        firstName: Boolean,
        lastName: Boolean,
        email: Boolean,
        password: Boolean,
        confirmPassword: Boolean
    });

    // Never updates
    const [formSchema, setFormSchema] = useState({
        firstName: Joi.string().required(),
        lastName: Joi.string().required(),
        email: Joi.string().required().email().regex(emailRegex),
        password: Joi.string().required().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&?.]).{8,30}$/),
        confirmPassword: Joi.string().required()
    })

    // Never updates
    const [inputRef, setInputRef] = useState({
        firstNameRef: React.createRef(),
        lastNameRef: React.createRef(),
        emailRef: React.createRef(),
        passwordRef: React.createRef(),
        confirmPasswordRef: React.createRef()
    });

    // render some JSX
}

Here I have 3 states. The first state are Booleans that say if the inputs look good. The second state is a formSchema which will never be updated. Lastly, the third state is the Refs for each of the inputs which will also never be updated.

My question is: Would is make more sense to only have one state for validInputs since it updates frequently, and then for formSchema and inputRef create a const object with vanilla javascript? Or should everything go into state like before?

It seems to me that it would make more sense to only use useState if that state is going to update, but I'm trying to see what is the proper convention for hooks moving forward.

Answer 1

You should only need to utilize state if:

• it controls some sort of element (like an input , select , textarea and so on).
• it's controlling some sort of data that needs to be manipulated (like a todo list that needs to have some items that are created, read, updated and deleted -- holds true for isomorphic apps as well, where some data needs to be manipulated on the front-end before being sent to a back-end for storage).
• it's used for some sort of conditional rendering , where the DOM needs to be re-rendered with UI changes (like an isLoading boolean that shows a Spinner when true , but then displays some sort of layout when false ).

There's no reason to clutter your state if it (whatever data type it is): Needs to be reusable across multiple components, is static, and doesn't update the DOM in any way (like a ref, or a field-level validation function or some sort static list of items).

In simple terms, doesn't matter if it's a class component or a functional component with a hook, you'll only need to use state if it requires dynamically manipulating/controlling something within the DOM.

Here's a simple example of a form with some validation :

Answer 2

i am scared that your frequently updated state are in object. yeah you can do that but it not an good way to update your individual state by putting them in object.

you don't need to keep data in state if it is not changing or updating. you can assign that type of data in some variables.

 //you can track your state value and state change by this function //you can use this same function in different component export function useFormInput(initialValue = "") { const [input, setInput] = useState(initialValue); function handleInputChange(e) { setInput(e.target.value); } return { value: input, onChange: handleInputChange, } } const FormAuth = props => { //Frequently updates //useFormInput function will return input value and unchange function const firstName = useFormInput(); const lastName = useFormInput(); // Never updates //here your not updating data is assigned in formSchema variable const formSchema = { firstName: Joi.string().required(), lastName: Joi.string().required(), email: Joi.string().required().email().regex(emailRegex), password: Joi.string().required().regex(/^(?=.*[az])(?=.*[AZ])(?=.*\\d)(?=.*[#$^+=!*()@%&?.]).{8,30}$/), confirmPassword: Joi.string().required() } // Never updates const inputRef = { firstNameRef: React.createRef(), lastNameRef: React.createRef(), emailRef: React.createRef(), passwordRef: React.createRef(), confirmPasswordRef: React.createRef() } return( <div> //firstname value and onchange function will be //assigned useing spread operator <input {...firstName} placeholder="first name"/> <input {...lastName} placeholder="last name"/> </div> ) }