Changing an input parameter within React component

Question

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)

Nicholas Tower · Accepted Answer · 2021-04-29 14:54:41Z

1

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';
}

answered Apr 29, 2021 at 14:54

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nikita Vlasenko Over a year ago

but url is passed in or it becomes local because it is a string and upon passing it into FileLink it is copied?

Nicholas Tower Over a year ago

({ url, data, ext, linkContent }) => This code is a destructuring assignment. It's the same as (props) => { let url = props.url // etc. url is a local variable that starts off with the same value as props.url. Reassigning this variable later doesn't have any effect outside the function.

Collectives™ on Stack Overflow

Changing an input parameter within React component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related