Search code examples
reactjsperformancetslintspread-syntax

Does order matter when using spread syntax in React component?


We are using spread operator in react component using {...Input} which also have onChange method, then our custom onChange need to wrote before spread or after the spread operator?

Does order matters while we use spread operator.? does method overriding is being done here?

Means which is correct and valid and preferred way to write, In terms of performance and syntax.

<Input type='text' {...input} onChange={onChange} />

Or

<Input type='text' onChange={onChange} {... input} /> 

Sorry to mixing 2 3 questions together, please do not tag it as unapproved or vote to closed. Now a days asking questions in SO going difficult. lol

I am also looking for general practice of to write spread item either on first place or last place in React Component , any lint rule?


Solution

  • yes it does matter.

    <Input type='text' {...input} onChange={onChange} />
    

    in this case the "onChange" method inside "input" will be overwritten by the "onChange" outside of it. and in the other case visa versa.

    I think depending on which one do you want to overwrite you can bring it inside input like:

    input = {...input, onChange}
    Or
    input = {onChange, ...input}
    
    <Input type='text' {...input}  />