welldone-software/why-did-you-render

WhyDidYouRender is not working in Storybook.js

Open

#290 opened on Jan 26, 2024

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (188 forks)batch import
Low prioritygood first issuehelp wanted

Repository metrics

Stars
 (10,560 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Issue Summary

WhyDidYouRender is not working as expected in Storybook.js.

Environment Information

  • Storybook Version: 6.4.0
  • React Version: 17.0.2
  • WDYR Version: 7.0.1
  • Node.js Version: 16.13.0
  • Browser: Chrome Version 120.0.6099.227 (Official Build) (64-bit)

Description

I have followed the documentation to integrate WhyDidYouRender (WDYR), but it doesn't seem to be working if I have Storybook.js in my React application. I expected to see logs or indications of re-renders, but nothing is showing up in the console.

Steps to Reproduce

  1. Added the wdyr.js configuration file to the .storybook directory: // .storybook/wdyr.js 
    import React from 'react';

const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
  trackAllPureComponents: true,
  trackHooks: true,
});
  2. Imported wdyr.js in the preview.js file: // .storybook/preview.js 
    import './wdyr';

Expected Behavior

I expected to see console logs indicating which components re-rendered and why, as specified in the WDYR configuration.

Actual Behavior

No logs or indications of re-renders are showing up in the console.

Contributor guide

Research direction
Investigate why WhyDidYouRender (WDYR) fails in Storybook. Check the WDYR documentation for Storybook integration. Ensure wdyr.js is imported before React in .storybook/preview.js. Verify that WDYR's monkey patching is not conflicting with Storybook's module bundling. Consider using WDYR's explicit setup with React's REACT DEVTOOLS GLOBAL HOOK or checking if Storybook's webpack config needs adjustment.
Tech stack
javascriptreact
Domain
frontendtesting
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
Basic React knowledgeStorybook setup
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50