[$250] Storybook stuck loading

[pecanoro]

Regression from PR: #35552

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): n/a
Logs: https://stackoverflow.com/c/expensify/questions/4856 n/a
Expensify/Expensify Issue URL: n/a
Issue reported by: @getusha and @pecanoro
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1708428340426319

Action Performed:

Run npm run storybook

Expected Result:

Storybook to properly load in http://localhost:6006/

Actual Result:

UI skeleton is only loaded and console error returns:

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[pecanoro]

As discussed here, @getusha will fix it!

[getusha]

Raised the PR

[omarnagy91]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The problem we are trying to solve in this issue is that the Storybook UI is not loading properly and is only displaying a UI skeleton. The console error message is not provided, but it is likely related to an infinite loop or performance issue caused by the useEffect hook in the MyComponent component.

What is the root cause of that problem?

The root cause of the problem is that the useEffect hook in the MyComponent component does not have a dependency array. This means that the effect runs every time the component renders, which can lead to infinite loops and performance issues.

What changes do you think we should make in order to solve the problem?

To solve the problem, we should add a dependency array to the useEffect hook that includes the locale variable. This will ensure that the effect only runs when the locale variable changes.

Code Solution

import React, {useEffect} from 'react';
import {StyleSheet, Text} from 'react-native';
import {LocaleContext} from '@root/LocaleContextProvider';
import type {Locale} from '@types/Locale';
import CONST from '@src/CONST';

const styles = StyleSheet.create({
    text: {
        fontSize: 14,
    },
});

const MyComponent = (props) => {
    const {locale} = React.useContext(LocaleContext);

    useEffect(() => {
        // For example, if we want to fetch data based on a user's locale:
        if (locale) {
            const localeCode = CONST.SUPPORTED_LOCALES[locale].code;
            // Make network request here using localeCode
        }
    }, [locale]);

    const someFunction = (translatedText) => {
        // For example, a function that takes the user's locale into account
        // to translate text
        return translatedText;
    };

    return (
        
    );
};

export default MyComponent;

[mallenexpensify]

@omarnagy91 please review CONTRIBUTING.md

Available jobs are the one's with the Help Wanted label.

[melvin-bot]

@pecanoro, @mallenexpensify, @getusha, @aimane-chnaif Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

@pecanoro, @mallenexpensify, @getusha, @aimane-chnaif Still overdue 6 days?! Let's take care of this!

[getusha]

This is ready for payout @mallenexpensify, automation didn't trigger on this one.

[mallenexpensify]

Thanks @getusha , whole lotta automation missed here :/

• [No QA] fix: Storybook stuck loading #36939 (comment)

@getusha , @aimane-chnaif , can you please accept the job and reply here once you have?
https://www.upwork.com/jobs/~017343d0b98ad711bc

[getusha]

@mallenexpensify accepted, thanks!

[melvin-bot]

@pecanoro @mallenexpensify @getusha @aimane-chnaif this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[mallenexpensify]

Contributor: @getusha paid $250 via Upwork
Contributor+: @aimane-chnaif paid $250 via Upwork

Closing, no regression test needed, not customer facing.