Fixing Styleguidist Component Lifecycle Issues

Styleguidist will sometimes trigger a re-render, forcing code to execute multiple times, when it doesn’t need to.

For example, this demo was re-fetching data from a server each time you edited the parameters:

import useLanguages from '../core/useLanguages.js';
const { state, actions } = useLanguages();
;
<div>
<p>Total Number of Languages is: {state.length}</p>
<p>{actions.formatLanguage(actions.getLanguage('vi'))}</p>
<LanguageDisplay lc='zzj' />
</div>

In this case, the hook was re-running even tho the state variables had not changed. As if the component was being unmounted and remounted.

To fix, @klappy suggested this:

import useLanguages from '../core/useLanguages.js';
function Component() {
  const { state, actions } = useLanguages();
  return (
    <div>
    <p>Total Number of Languages is: {state.length}</p>
    <p>{actions.formatLanguage(actions.getLanguage('vi'))}</p>
    <LanguageDisplay lc='zzj' />
    </div>
  );
};
<Component />

This fix also has the benefit of actually showing how to write a component that uses the hook.

#styleguidist, #hooks, #javascript, #react

2 Likes

Thanks for documenting this @mandolyte!

It’s probably good practice for us to default to this in our demos.

Wrapping the example in the dummy component helps address a myriad of other strange issues in styleguidist.

Additionally, it also helps devs that are new to react to see how the code could be implemented in their custom components.