[$250] Migrate Button.js to function component

[marcaaron]

Class Component Migration

Filenames

• src/components/Button.js
  • type: React.Component
  • has state values: false
  • has refs: false
  • has context: false
  • lifecycle methods: componentDidMount,componentWillUnmount

Task

• We currently have some class components in our codebase that we would like to refactor to a function component.
• Here's a link with some general advice on how to refactor a class component to a function component: https://react.dev/reference/react/Component#alternatives
• If you need additional guidance, please ask in #expensify-open-source
• Test for any regressions and verify that there are no breaking changes

[s-alves10]

I'd love to work on this.

[Lai-Star]

Proposal

Hi, I'd like to finish this task.
Certainly, it's a good practice to refactor class components to function components using React Hooks as they make your code cleaner and easier to understand.
Let's assume your Button.js class component currently looks something like this:

jsx
Copy code
import React from 'react';

class Button extends React.Component {
componentDidMount() {
// Some code here
}

componentWillUnmount() {
// Some code here
}

render() {
return (
{this.props.children}
);
}
}

export default Button;
Following the advice from the React documentation you provided, the refactored functional component with hooks might look like this:

jsx
Copy code
import React, { useEffect } from 'react';

const Button = (props) => {
useEffect(() => {
// Equivalent to componentDidMount
// Some code here

return () => {
  // Equivalent to componentWillUnmount
  // Some code here
};

}, []); // The empty array causes this effect to only run once on mount and unmount

return (
{props.children}
);
};

export default Button;
In this refactored version, we use the useEffect hook. The function passed to useEffect will run after the render is committed to the screen (acting like componentDidMount). If you return a function from useEffect, React will run it when it is cleaning up the component (acting like componentWillUnmount).

Once you have made these changes, you should test the component thoroughly to ensure that no functionality was broken during the refactoring process. This could involve manual testing, or running an existing suite of automated tests if you have them.

[melvin-bot]

Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

12 days overdue. Walking. Toward. The. Light...

[melvin-bot]

This issue has not been updated in over 14 days. eroding to Weekly issue.

[vdem0115]

I'd like to work on this issue

[olexyt]

I can work on this issue.

[rayane-djouah]

I'd like to work on this issue

[ghost]

Dibs

[mkhutornyi]

I'd like to work on this.

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[fabioh8010]

@marcaaron Could you reopen this issue and assign to me please? It turns out that the file still exists and I need to migrate it to function component before migrating to TS. Thanks!

[marcaaron]

Sounds good. Feel free to get me for the final merge!

[fabioh8010]

@marcaaron PR is now ready to review!

[melvin-bot]

This issue has not been updated in over 15 days. @fabioh8010, @marcaaron eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[parasharrajat]

This needs a BZ member. Please assign me as C+ as well.

[melvin-bot]

Triggered auto assignment to @dylanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[marcaaron]

Thanks for catching that one @parasharrajat - sorry for the delay!

[marcaaron]

@dylanexpensify this is not a bug - @parasharrajat just needs payment for the C+ review on the linked PR Thanks!

[dylanexpensify]

Ahh apologies! Will get payment going!

[parasharrajat]

It just needs a summary @dylanexpensify. Feel free to close it afterward. I will request later.

[dylanexpensify]

Payment summary:

• Contributor+: @parasharrajat $250

Please request!

[parasharrajat]

Payment requested as per #16121 (comment)

[JmillsExpensify]

$250 payment approved for @parasharrajat based on summary above.