Refactor Picker Component for Better Performance

[manideepk90]

Description

The Picker component in the Hyperswitch SDK currently struggles with performance lags when handling large datasets, such as selecting countries and states during the payment process. To improve performance, the goal is to optimize how the component loads and renders large amounts of data. Techniques like lazy loading or virtualization can be used to ensure only visible items are rendered, reducing the load on the app. This optimization will provide a smoother user experience without lags, while still following coding best practices and guidelines to keep the codebase clean and maintainable.

Getting started

1. Get familiar with ReScript.
2. Check the README.md for project structure and setup instructions.
3. To setup locally, follow these steps

#  Clone repository
cd hyperswitch-client-core
git submodule update --init --recursive
yarn install
yarn run server     # This starts the mock server
yarn run re:start   # In another terminal

Expected Behavior:

• The component should load large datasets without any noticeable performance lag.
• Scrolling and selection in the Picker should remain smooth and responsive, regardless of the dataset size.

Actual Behavior:

• The current implementation experiences slow load times and memory bloat when handling large datasets.
• Scrolling can become jerky, especially with very large data.

Tasks:

Analyze Current Performance:

Investigate existing bottlenecks in the component related to loading and memory consumption.

Refactor for Optimization:

Implement lazy loading or virtualization to improve the component’s performance with large datasets. Ensure smooth scrolling and responsive user interaction even with large datasets.

Testing:

Test with datasets of varying sizes (small, medium, large) to ensure consistent performance improvements. Measure load times, memory usage, and interaction smoothness for performance benchmarks.

Contribution Guidelines:

• Fork the repository and create a new branch for your work.
• Write clean, well-documented code with clear commit messages.
• Make sure to follow our coding standards and contribution guidelines.

Submission Process:

• Ask the maintainers for assignment of the issue, you can request for assignment by commenting on the issue itself.
• Once assigned, submit a pull request (PR).
• Maintainers will review and provide feedback, if any.
• Maintainers can unassign issues due to inactivity, read more here.
• For this issue, please submit a PR on https://github.com/juspay/hyperswitch-client-core repo, and link it to the issue.

Refer here for Terms and conditions for the contest.

If you have any questions or need help getting started, feel free to ask in the comments!

[surazraaz1998]

Hey, I'd like to work on this issue. Could you please assign it to me and add the Hacktoberfest tag as well? Thanks!

[gorakhnathy7]

Hey @surazraaz1998 Already assigned another issue to you, kindly complete it first and let us know.

[akshatshukla13]

Would like to work on this issue. Assign it to me!!

[gorakhnathy7]

Hey @akshatshukla13 Assigned the issue to you!

[akshatshukla13]

Thanks! looking into it...

[akshatshukla13]

Hey @gorakhnathy7 Despite following all the steps mentioned in the README, I'm still unable to set up the server. It's showing a 'cannot get' error. Could you provide assistance with resolving this?

[manideepk90]

Hello @akshatshukla13, please add the publishable key and the secret key, also known as the API key, to the .en file and then rename it to .env. You can generate these keys on the Hyperswitch dashboard. Also, add dummy connectors in the connectors section of the dashboard. Attempt to run the client core on Android or iOS by executing yarn start. Ensure you run yarn before this step. Additionally, execute yarn server and yarn re:start in separate terminals to get the application running.

[gorakhnathy7]

Hey @akshatshukla13

Kindly let us know, if you're still working on the issue? If you have any questions or need assistance, feel free to reach out in the community.

[chilkaditya]

Hi, I would love to work on this issue if no one else is working on it right now.

[chilkaditya]

Hello @akshatshukla13, please add the publishable key and the secret key, also known as the API key, to the .en file and then rename it to .env. You can generate these keys on the Hyperswitch dashboard. Also, add dummy connectors in the connectors section of the dashboard. Attempt to run the client core on Android or iOS by executing yarn start. Ensure you run yarn before this step. Additionally, execute yarn server and yarn re:start in separate terminals to get the application running.

Hi @manideepk90, I'm encountering a 'Cannot GET' error while setting up the project. I've already pasted the API key and publishable key into the .env file and added a dummy connector (PayPal dummy processor).

[manideepk90]

hey @chilkaditya, you can find webpack.config.js in reactNativeWeb folder. you just set isDevelopment to true or replace this line

const isDevelopment = process.env.NODE_ENV == 'development';

with

const isDevelopment = process.env.NODE_ENV == 'development' || true;

[chilkaditya]

Hi, @manideepk90 still getting the same error. When I run "git submodule update --init --recursive" then it is not updating the submodules, still ios and android folders are empty. Is this the reason I am still getting this error?

[manideepk90]

Hey @chilkaditya, sorry for late response. You pull the new code using git pull origin main and then go the android git pull origin main and same for IOS. or else you do yarn and run yarn web:demo to work with web version. Note: make sure you added ENV variables into .env file

[manideepk90]

if possible, share the screen recording what exactly you are facing, so i can help you with that.

[chilkaditya]

Hi @manideepk90 here it is my screen recording

https://github.com/user-attachments/assets/d01acac1-a0f8-4af1-afda-835912fcfa13

[manideepk90]

actually you need 3 terminal for running demo app 1 : yarn re:start 2 : yarn server 3 : yarn web

[manideepk90]

or else you can try 2 terminals 1: yarn re:start 2: yarn web:demo

[chilkaditya]

@manideepk90 I am still getting the same error. pasted one video below for your reference.

https://github.com/user-attachments/assets/82ebbbaf-e76f-47f5-a754-cd56072586e8

[manideepk90]

now, there is a folder named reactNativeWeb/DemoApp open demoApp.html in browser. to see the details

[chilkaditya]

now, there is a folder named reactNativeWeb/DemoApp open demoApp.html in browser. to see the details

There also I am getting "can not GET/" message in the screen.

[manideepk90]

add NODE_ENV = development to the .env file and remove the business related information while creating payment intent in server.js file i.e, business_label, business_country.

[chilkaditya]

After following your steps

add NODE_ENV = development to the .env file and remove the business related information while creating payment intent in server.js file i.e, business_label, business_country.

After following your steps, I am getting "can not GET" message for localhost::5252 but when I am opening the DemoApp.html in browser I am getting the "Add payment method" page. Pasted one image for your reference. note: I only change the country below, I did not understand what you mean by "business_label".

app.get('/create-payment-intent', async (req, res) => {
  try {
    var paymentIntent = await hyper.paymentIntents.create({
      amount: 2999,
      currency: 'USD',
      authentication_type: 'no_three_ds',
      customer_id: 'hyperswitch_demo_id',
      capture_method: 'automatic',
      email: '[email protected]',
      billing: {
        address: {
          line1: '1467',
          line2: 'Harrison Street',
          line3: 'Harrison Street',
          city: 'San Fransico',
          state: 'California',
          zip: '94122',
          // country: 'PL',
          first_name: 'joseph',
          last_name: 'Doe',
        }
      },

[manideepk90]

The localhost:5252 serves as the backend for creating sessions. The localhost:8080 hosts the application, while demoApp.html represents the actual merchant-facing app. The localhost:8080 application is displayed within an iframe. To enable the visibility of the "country" and "state" fields, remove the billing object from the server.js file.

[Anurag99778]

Hi @manideepk90, @gorakhnathy7, I want to work on this issue can you please assign it to me ?

[manideepk90]

@Anurag99778 sorry, this issue is closed now, check other issues. thanks