Refactoring setState Usage as a Prop

[AnnaSolovykh]

Description
Refactor instances where setState is used as a prop in the codebase to ensure best practices and maintain code quality.

Context
Using setState as a prop can lead to various issues, including unintended side effects, difficulty in debugging, and poor component encapsulation. The goal is to locate all instances where setState is passed as a prop and refactor the code to avoid this pattern.

Requirements

• Locate Instances of setState as a Prop: Search the codebase for any occurrences where setState is being passed as a prop.
• Refactor Code: Modify the identified code to remove the usage of setState as a prop.
• Ensure Proper State Management: Use appropriate methods to manage state without passing setState as a prop, such as using callback functions or context API.

Steps to Resolve

1. Search for Usage:

   • If using Visual Studio Code, open the search panel (Ctrl+Shift+F) and enter the search query set[A-Z][a-zA-Z]*\s*=\{ to find all occurrences. Click on the .* icon to the right of the search input box to enable regex search.

2. Refactor Example:

   • Before:

     <ChildComponent setState={setState} />

   • After:

     // Pass a callback function instead
     <ChildComponent updateState={(newState) => setState(newState)} />

3. Test Changes: Ensure all refactored components are tested to verify that state updates work correctly without passing setState as a prop.

Additional Resources

• React Docs: Sharing State Between Components - Explanation of lifting state up and sharing state between components.
• Why we shouldn't use setState as a prop

[Nassimancer]

After reviewing the code in the following files: ResetPassword.jsx, Signin.jsx, RegisterForm.jsx, Register.jsx, EmailVerify.jsx, ForgetPassword.jsx, components do not use setState or any state update function as a prop. The code adheres to the best practice of avoiding passing setState functions as props, ensuring proper encapsulation and maintainability of the component.

[AnnaSolovykh]

These are those I could find now quickly. Please check the whole codebase to ensure you find all of them. setState - is a general name because it is used for setting the state. Other namings depending on the purpose are used in the codebase.

@Nassimancer

[AnnaSolovykh]

Let's change the strategy of searching, @Nassimancer ! We will use regex for that. I have updated the instructions.

Please make sure to the the resources I attached about lifting the state. You can, of course, use some others too, first look into it in details.

[AnnaSolovykh]

https://www.robinwieruch.de/react-lift-state/ https://www.robinwieruch.de/react-derive-state-props/

I will add up more links.