CODEWITHSUNDEEP
reactjsredux
Nikita Vlasenko
Nikita Vlasenko

Reputation: 4352

Changing an input parameter within React component

I am going through the code of a project and I see the following code:

export const FileLink = React.memo(({ url, data, ext, linkContent }) => {
    ...
    ...

  if (!url.includes('?')) {
    url += '?' 
  }
  if (!url.endsWith('?')) {
    url += '&' 
  }
  return <a href={`${url}file_format=${ext}`}>{linkContent}</a>
})

It is working fine and no bugs appear in app behavior. But url is a passed parameter and it is changed within the FileLink: from what I read React components should be pure functions. So, I wonder whether its ok to do that, under which circumstances, and if not - why? What can go wrong? Any examples of how it could mess up the app?

(If interested to see the full code: https://github.com/broadinstitute/seqr/blob/8b4419285dfac9365c5c500bbb87b89808c0cedd/ui/shared/components/buttons/ExportTableButton.jsx#L37)

Upvotes: 1

Views: 1164

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 84982

url is a local variable. Reassigning that variable, which is all this code is doing to it, has no possibility of affecting code outside of this function call. It doesn't make the function impure.

Now, if you were passed in an object, and you started mutating that object, then that would break purity. Because if the component that passed you this object is still using it, then it can "see" that change. For example:

const Example = ({ someObjectProp }) => {
  someObjectProp.name = 'bob';
}

Upvotes: 1

Related Questions