Mattermost-server: Migrate string-refs to functional ones: this.refs.textbox

Created on 28 Sep 2020  路  5Comments  路  Source: mattermost/mattermost-server

Context:

String references are deprecated in React, and they will eventually disappear. Since React 16.3 there is the new api to use for reference creation createRef which improved the way to handle them greatly. Callbacks refs still have some valid usage, so we might make exceptions with those, please raise the issue if you feel you need to use them.

How to migrate

Go to ./components/createcomment/createcomment.jsx and look for usage of this.refs.textbox. Once you find them:

  1. Remove usage this.refs.some-reference
  2. Add a this.some-reference = React.createRef()
  3. Change code depending on this.refs.some-reference into using this.some-reference.current. Be aware that this might be accessed by files other than the one that defined it. Also, you might need to refactor the code to keep behaviour the same.
  4. If there are e2e tests using that functionality run them to ensure it works as expected. Optionally consider adding any new tests that might ensure it functions as expected.
  5. Look for any other this.refs used in the file and repeat from the begining.

Example of migrated code

Questions

you can ask for help messaging @guillermo.vaya or posting in the ~webapp channel in the community server

AreTechnical Debt Easy Help Wanted

Most helpful comment

Hi @Willyfrog, I'll work on this ticket:)

All 5 comments

@Willyfrog I would like to take this up.

thanks for working in the issue

hi @MathewtheCoder let me know if you need any help/clarification on this issue :)

moving back to up for grabs

@MathewtheCoder let us know if you still want to work on it again

Hi @Willyfrog, I'll work on this ticket:)

Was this page helpful?
0 / 5 - 0 ratings