Mattermost-server: Remove usage of findDOMNode from Create Team screens

Created on 1 Oct 2020  路  1Comment  路  Source: mattermost/mattermost-server

ReactDOM.findDOMNode is considered to be an escape hatch in React for when you need to access the DOM directly, but it's generally preferred to use Refs for this instead since it has better support with newer React features such as the experimental concurrent mode.

The usage of ReactDOM.findDOMNode should be removed, and refs should be added if necessary to keep the same functionality in the modified components. This will help us be prepared for new versions of React, and it'll let us try out newer React features that come along.

Since this is a campaign spread across multiple tickets, this ticket focuses on removing findDOMNode from the following components in the web app:

  • components/create_team/components/display_name.jsx
  • components/create_team/components/team_url/team_url.tsx

These components are both used in the screens to create a new team in Mattermost, and both screens use a combination of refs and findDOMNode to get the value of textboxes to be submitted to the server. Instead of using refs, these textboxes should be turned into controlled components that store their value in state, and then the value sent to the server should be read from there instead of from the DOM.

Also, if possible, either E2E tests (using Cypress) or unit tests should be added to confirm that the previous behaviour still works.

For more details or if you have any questions, feel free to reach out to @hmhealey or message me on https://community.mattermost.com where I go by harrison.


If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-28999

Easy Hacktoberfest Help Wanted PR Exists TecReactJS

Most helpful comment

Hello, I'd like to be assigned to this ticket :smile:

>All comments

Hello, I'd like to be assigned to this ticket :smile:

Was this page helpful?
0 / 5 - 0 ratings