CINXE.COM
trackExtraHooks cannot set property of #<Object> which has only a getter · Issue #85 · welldone-software/why-did-you-render · GitHub
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-3e154969b9f9.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-9c5b7a476542.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-afda8eb0fb33.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-2494e44ccdc5.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-56fff47acadc.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-71cd4cc132ec.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-fd5499848985.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-31d17ba3e139.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-68d6b2c79663.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-4cf0d59ab51a.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-af846850481e.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-8b10f05a77e6.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-2f6e722088eb.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-9c77ed90200e.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["copilot_new_references_ui","copilot_beta_features_opt_in","copilot_chat_static_thread_suggestions","copilot_conversational_ux_history_refs","copilot_implicit_context","copilot_smell_icebreaker_ux","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","hovercard_accessibility","issues_react_new_timeline","issues_react_avatar_refactor","issues_react_remove_placeholders","issues_react_blur_item_picker_on_close","marketing_pages_search_explore_provider","react_keyboard_shortcuts_dialog","remove_child_patch","sample_network_conn_type","site_metered_billing_update","issues_react_first_time_contribution_banner","lifecycle_label_name_updates"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-6657579a8825.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_js-b73fdff77a4e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-aff936e590ed.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-247092-740e4ddd559d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-93b6a0551aa9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-cd35650c2e9c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-4aa4b0e95669.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-6d3967acd51c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_combobox-nav_dist_index_js-node_modules_github_g-emoji-element_di-6ce195-53781cbc550f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-6afc16-3cdfa69a0406.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-f5498b8d4e5d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-492b5042c841.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-1f651a-1e3d784c897c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-7671f1-dc6cac136d88.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-71486356f507.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-e3ab8405ef80.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-bb80ec-634de60bacfa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-ce7225a304c5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-f3aee1-e6893db9c19e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-f8a5485c982a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-858e043fcf76.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-6cf3320416b8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_scroll-anchoring_dist_scroll-anchoring_esm_js-node_modules_stacktrace-pa-a71630-6f3c4f0189d8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-0e07cc183eed.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-0b5e12-889cec8cf448.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-eae9df0dd562.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-18d1c91a7872.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-7cbef09a422c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-d0d0a6-0e9fa537dc4f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-c89801ebbe15.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-a6e4c4c86bfa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-3366f6b6298e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_hotkey_dist_index_js-d92e69b3521a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_github_remote-form_dist_-b96a6a-a89a51d7b98e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_form-utils_form-utils_ts-ui_packages_input-navigation-behavior_input-navigation-b-a97423-97468312ad00.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/issues-d8e5240e0d8e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/structured-issues-eb321c77cee9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_tanstack_query-core_build_modern_queryClient_js-e40bb86d3e93.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-37e3d5-31653d7f2342.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-285fc29e9fa5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-3eda30673b32.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>trackExtraHooks cannot set property of #<Object> which has only a getter · Issue #85 · welldone-software/why-did-you-render · GitHub</title> <meta name="route-pattern" content="/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)" data-turbo-transient> <meta name="route-controller" content="voltron_issues_fragments" data-turbo-transient> <meta name="route-action" content="issue_layout" data-turbo-transient> <meta name="current-catalog-service-hash" content="81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114"> <meta name="request-id" content="DD9A:365052:226F30:266C04:67493BC2" data-pjax-transient="true"/><meta name="html-safe-nonce" content="2350ac1ccbf3c1f743402f75380fd04e0deac52b7e98f7e4495fbb742a8fc0e0" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJERDlBOjM2NTA1MjoyMjZGMzA6MjY2QzA0OjY3NDkzQkMyIiwidmlzaXRvcl9pZCI6Ijg1MzMxMjg5NjU0MzM5MzI3MzgiLCJyZWdpb25fZWRnZSI6InNvdXRoZWFzdGFzaWEiLCJyZWdpb25fcmVuZGVyIjoic291dGhlYXN0YXNpYSJ9" data-pjax-transient="true"/><meta name="visitor-hmac" content="58bba2bc262cb1d4f7cef75246223680647a37fd64230c64f120a4a989d9a468" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="issue:557953449" data-turbo-transient> <meta name="github-keyboard-shortcuts" content="repository,issues,copilot" data-turbo-transient="true" /> <meta name="selected-link" value="repo_issues" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="By specifying trackExtraHooks, the following error is thrown. NOTE: The error is only thrown when running in local machine, NOT in codesandbox. Reproduction link: whyDidYouRender.js:167 Uncaught TypeError: Cannot set property useSelector..."> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub"> <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/welldone-software/why-did-you-render/85/issue_layout" /> <meta name="twitter:image" content="https://opengraph.githubassets.com/e7f15e6da0054729df372004993b0742db0bf99d0041b3afa29de25e3325eb75/welldone-software/why-did-you-render/issues/85" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="trackExtraHooks cannot set property of #<Object> which has only a getter · Issue #85 · welldone-software/why-did-you-render" /><meta name="twitter:description" content="By specifying trackExtraHooks, the following error is thrown. NOTE: The error is only thrown when running in local machine, NOT in codesandbox. Reproduction link: whyDidYouRender.js:167 Uncaught Ty..." /> <meta property="og:image" content="https://opengraph.githubassets.com/e7f15e6da0054729df372004993b0742db0bf99d0041b3afa29de25e3325eb75/welldone-software/why-did-you-render/issues/85" /><meta property="og:image:alt" content="By specifying trackExtraHooks, the following error is thrown. NOTE: The error is only thrown when running in local machine, NOT in codesandbox. Reproduction link: whyDidYouRender.js:167 Uncaught Ty..." /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="600" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="trackExtraHooks cannot set property of #<Object> which has only a getter · Issue #85 · welldone-software/why-did-you-render" /><meta property="og:url" content="https://github.com/welldone-software/why-did-you-render/issues/85" /><meta property="og:description" content="By specifying trackExtraHooks, the following error is thrown. NOTE: The error is only thrown when running in local machine, NOT in codesandbox. Reproduction link: whyDidYouRender.js:167 Uncaught Ty..." /><meta property="og:author:username" content="mwskwong" /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="0361a11d6ba7285e98ad3340b1de5998c1adf9be672ff350e645684a12c5ff34" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="ace39c3b6632770952207593607e6e0be0db363435a8b877b1f96abe6430f345" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="3adbaefc258174e49a9472f62ba4ed262e7c0112f9e7266a3e927bd7b898716f" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="58069173ba3ee40a605f317588f70346d3cda2c3c32d767dd6d2909bbe343612" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta name="voltron-timing" value="1058"> <meta name="go-import" content="github.com/welldone-software/why-did-you-render git https://github.com/welldone-software/why-did-you-render.git"> <meta name="octolytics-dimension-user_id" content="1571470" /><meta name="octolytics-dimension-user_login" content="welldone-software" /><meta name="octolytics-dimension-repository_id" content="157014461" /><meta name="octolytics-dimension-repository_nwo" content="welldone-software/why-did-you-render" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="157014461" /><meta name="octolytics-dimension-repository_network_root_nwo" content="welldone-software/why-did-you-render" /> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials"> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_tanstack_query-core_build_modern_queryClient_js-e40bb86d3e93.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-37e3d5-31653d7f2342.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-285fc29e9fa5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-f3cc184507a7.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-94fd67-cf3dd69d89eb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/sessions-8fa3b694f335.js"></script> <header class="HeaderMktg header-logged-out js-details-container js-header Details f4 py-3" role="banner" data-is-top="true" data-color-mode=light data-light-theme=light data-dark-theme=dark> <h2 class="sr-only">Navigation Menu</h2> <button type="button" class="HeaderMktg-backdrop d-lg-none border-0 position-fixed top-0 left-0 width-full height-full js-details-target" aria-label="Toggle navigation"> <span class="d-none">Toggle navigation</span> </button> <div class="d-flex flex-column flex-lg-row flex-items-center px-3 px-md-4 px-lg-5 height-full position-relative z-1"> <div class="d-flex flex-justify-between flex-items-center width-full width-lg-auto"> <div class="flex-1"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target js-nav-padding-recalculate js-header-menu-toggle Button--link Button--medium Button d-lg-none color-fg-inherit p-1"> <span class="Button-content"> <span class="Button-label"><div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div></span> </span> </button> </div> <a class="mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav" href="/" aria-label="Homepage" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Logomark;ref_loc:Header"}"> <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <div class="flex-1 flex-order-2 text-right"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fwelldone-software%2Fwhy-did-you-render%2Fissues%2F85" class="HeaderMenu-link HeaderMenu-button d-inline-flex d-lg-none flex-order-1 f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/welldone-software/why-did-you-render/issues/85","user_id":null}}" data-hydro-click-hmac="fe499f2b256ee4a059b37b043bbd77c9b76b6f75862d01361293e90c6b441115" data-analytics-event="{"category":"Marketing nav","action":"click to Sign in","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> </div> <div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0"> <div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0"> <nav class="HeaderMenu-nav" aria-label="Global"> <ul class="d-lg-flex list-style-none"> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Product <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"product","tag":"link","label":"github_copilot_link_product_navbar"}" href="https://github.com/features/copilot"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Write better code with AI </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"security","context":"product","tag":"link","label":"security_link_product_navbar"}" href="https://github.com/features/security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Security</div> Find and fix vulnerabilities </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"actions","context":"product","tag":"link","label":"actions_link_product_navbar"}" href="https://github.com/features/actions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-workflow color-fg-subtle mr-3"> <path d="M1 3a2 2 0 0 1 2-2h6.5a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2H7v4.063C7 16.355 7.644 17 8.438 17H12.5v-2.5a2 2 0 0 1 2-2H21a2 2 0 0 1 2 2V21a2 2 0 0 1-2 2h-6.5a2 2 0 0 1-2-2v-2.5H8.437A2.939 2.939 0 0 1 5.5 15.562V11.5H3a2 2 0 0 1-2-2Zm2-.5a.5.5 0 0 0-.5.5v6.5a.5.5 0 0 0 .5.5h6.5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5ZM14.5 14a.5.5 0 0 0-.5.5V21a.5.5 0 0 0 .5.5H21a.5.5 0 0 0 .5-.5v-6.5a.5.5 0 0 0-.5-.5Z"></path> </svg> <div> <div class="color-fg-default h4">Actions</div> Automate any workflow </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"codespaces","context":"product","tag":"link","label":"codespaces_link_product_navbar"}" href="https://github.com/features/codespaces"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-codespaces color-fg-subtle mr-3"> <path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z"></path><path d="M10 17.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> <div> <div class="color-fg-default h4">Codespaces</div> Instant dev environments </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"issues","context":"product","tag":"link","label":"issues_link_product_navbar"}" href="https://github.com/features/issues"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-issue-opened color-fg-subtle mr-3"> <path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Zm9.5 2a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 14Z"></path> </svg> <div> <div class="color-fg-default h4">Issues</div> Plan and track work </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"code_review","context":"product","tag":"link","label":"code_review_link_product_navbar"}" href="https://github.com/features/code-review"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-review color-fg-subtle mr-3"> <path d="M10.3 6.74a.75.75 0 0 1-.04 1.06l-2.908 2.7 2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M1.5 4.25c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v12.5a1.75 1.75 0 0 1-1.75 1.75h-9.69l-3.573 3.573A1.458 1.458 0 0 1 5 21.043V18.5H3.25a1.75 1.75 0 0 1-1.75-1.75ZM3.25 4a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 .75.75v3.19l3.72-3.72a.749.749 0 0 1 .53-.22h10a.25.25 0 0 0 .25-.25V4.25a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Review</div> Manage code changes </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"discussions","context":"product","tag":"link","label":"discussions_link_product_navbar"}" href="https://github.com/features/discussions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Discussions</div> Collaborate outside of code </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"code_search","context":"product","tag":"link","label":"code_search_link_product_navbar"}" href="https://github.com/features/code-search"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-square color-fg-subtle mr-3"> <path d="M10.3 8.24a.75.75 0 0 1-.04 1.06L7.352 12l2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M2 3.75C2 2.784 2.784 2 3.75 2h16.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 0 1 20.25 22H3.75A1.75 1.75 0 0 1 2 20.25Zm1.75-.25a.25.25 0 0 0-.25.25v16.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Search</div> Find more, search less </div> </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="product-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="product-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"all_features","context":"product","tag":"link","label":"all_features_link_product_navbar"}" href="https://github.com/features"> All features </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"documentation","context":"product","tag":"link","label":"documentation_link_product_navbar"}" href="https://docs.github.com"> Documentation <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"github_skills","context":"product","tag":"link","label":"github_skills_link_product_navbar"}" href="https://skills.github.com"> GitHub Skills <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"blog","context":"product","tag":"link","label":"blog_link_product_navbar"}" href="https://github.blog"> Blog <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Solutions <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 pb-lg-3 mb-3 mb-lg-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-company-size-heading">By company size</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-company-size-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"enterprises","context":"solutions","tag":"link","label":"enterprises_link_solutions_navbar"}" href="https://github.com/enterprise"> Enterprises </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"small_and_medium_teams","context":"solutions","tag":"link","label":"small_and_medium_teams_link_solutions_navbar"}" href="https://github.com/team"> Small and medium teams </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"startups","context":"solutions","tag":"link","label":"startups_link_solutions_navbar"}" href="https://github.com/enterprise/startups"> Startups </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-use-case-heading">By use case</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-use-case-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devsecops","context":"solutions","tag":"link","label":"devsecops_link_solutions_navbar"}" href="/solutions/use-case/devsecops"> DevSecOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"solutions","tag":"link","label":"devops_link_solutions_navbar"}" href="/solutions/use-case/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ci_cd","context":"solutions","tag":"link","label":"ci_cd_link_solutions_navbar"}" href="/solutions/use-case/ci-cd"> CI/CD </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_use_cases","context":"solutions","tag":"link","label":"view_all_use_cases_link_solutions_navbar"}" href="/solutions/use-case"> View all use cases </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-industry-heading">By industry</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-industry-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"healthcare","context":"solutions","tag":"link","label":"healthcare_link_solutions_navbar"}" href="/solutions/industry/healthcare"> Healthcare </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"financial_services","context":"solutions","tag":"link","label":"financial_services_link_solutions_navbar"}" href="/solutions/industry/financial-services"> Financial services </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"manufacturing","context":"solutions","tag":"link","label":"manufacturing_link_solutions_navbar"}" href="/solutions/industry/manufacturing"> Manufacturing </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"government","context":"solutions","tag":"link","label":"government_link_solutions_navbar"}" href="/solutions/industry/government"> Government </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_industries","context":"solutions","tag":"link","label":"view_all_industries_link_solutions_navbar"}" href="/solutions/industry"> View all industries </a></li> </ul> </div> </div> <div class="HeaderMenu-trailing-link rounded-bottom-2 flex-shrink-0 mt-lg-4 px-lg-4 py-4 py-lg-3 f5 text-semibold"> <a href="/solutions"> View all solutions <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-right HeaderMenu-trailing-link-icon"> <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path> </svg> </a> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Resources <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-topics-heading">Topics</span> <ul class="list-style-none f5" aria-labelledby="resources-topics-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ai","context":"resources","tag":"link","label":"ai_link_resources_navbar"}" href="/resources/articles/ai"> AI </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"resources","tag":"link","label":"devops_link_resources_navbar"}" href="/resources/articles/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"security","context":"resources","tag":"link","label":"security_link_resources_navbar"}" href="/resources/articles/security"> Security </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"software_development","context":"resources","tag":"link","label":"software_development_link_resources_navbar"}" href="/resources/articles/software-development"> Software Development </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all","context":"resources","tag":"link","label":"view_all_link_resources_navbar"}" href="/resources/articles"> View all </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="resources-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"learning_pathways","context":"resources","tag":"link","label":"learning_pathways_link_resources_navbar"}" href="https://resources.github.com/learn/pathways"> Learning Pathways <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"white_papers_ebooks_webinars","context":"resources","tag":"link","label":"white_papers_ebooks_webinars_link_resources_navbar"}" href="https://resources.github.com"> White papers, Ebooks, Webinars <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"customer_stories","context":"resources","tag":"link","label":"customer_stories_link_resources_navbar"}" href="https://github.com/customer-stories"> Customer Stories </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"partners","context":"resources","tag":"link","label":"partners_link_resources_navbar"}" href="https://partner.github.com"> Partners <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Open Source <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"github_sponsors","context":"open_source","tag":"link","label":"github_sponsors_link_open_source_navbar"}" href="/sponsors"> <div> <div class="color-fg-default h4">GitHub Sponsors</div> Fund open source developers </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"the_readme_project","context":"open_source","tag":"link","label":"the_readme_project_link_open_source_navbar"}" href="https://github.com/readme"> <div> <div class="color-fg-default h4">The ReadME Project</div> GitHub community articles </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="open-source-repositories-heading">Repositories</span> <ul class="list-style-none f5" aria-labelledby="open-source-repositories-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"topics","context":"open_source","tag":"link","label":"topics_link_open_source_navbar"}" href="https://github.com/topics"> Topics </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"trending","context":"open_source","tag":"link","label":"trending_link_open_source_navbar"}" href="https://github.com/trending"> Trending </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"collections","context":"open_source","tag":"link","label":"collections_link_open_source_navbar"}" href="https://github.com/collections"> Collections </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Enterprise <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"enterprise_platform","context":"enterprise","tag":"link","label":"enterprise_platform_link_enterprise_navbar"}" href="/enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-stack color-fg-subtle mr-3"> <path d="M11.063 1.456a1.749 1.749 0 0 1 1.874 0l8.383 5.316a1.751 1.751 0 0 1 0 2.956l-8.383 5.316a1.749 1.749 0 0 1-1.874 0L2.68 9.728a1.751 1.751 0 0 1 0-2.956Zm1.071 1.267a.25.25 0 0 0-.268 0L3.483 8.039a.25.25 0 0 0 0 .422l8.383 5.316a.25.25 0 0 0 .268 0l8.383-5.316a.25.25 0 0 0 0-.422Z"></path><path d="M1.867 12.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path><path d="M1.867 16.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path> </svg> <div> <div class="color-fg-default h4">Enterprise platform</div> AI-powered developer platform </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="enterprise-available-add-ons-heading">Available add-ons</span> <ul class="list-style-none f5" aria-labelledby="enterprise-available-add-ons-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"advanced_security","context":"enterprise","tag":"link","label":"advanced_security_link_enterprise_navbar"}" href="https://github.com/enterprise/advanced-security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Advanced Security</div> Enterprise-grade security features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"enterprise","tag":"link","label":"github_copilot_link_enterprise_navbar"}" href="/features/copilot#enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Enterprise-grade AI features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"premium_support","context":"enterprise","tag":"link","label":"premium_support_link_enterprise_navbar"}" href="/premium-support"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Premium Support</div> Enterprise-grade 24/7 support </div> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <a class="HeaderMenu-link no-underline px-0 px-lg-2 py-3 py-lg-2 d-block d-lg-inline-block" data-analytics-event="{"location":"navbar","action":"pricing","context":"global","tag":"link","label":"pricing_link_global_navbar"}" href="https://github.com/pricing">Pricing</a> </li> </ul> </nav> <div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center mt-3 mt-lg-0 text-lg-left ml-lg-3"> <qbsearch-input class="search-input" data-scope="repo:welldone-software/why-did-you-render" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="CLuFizY8ckMlkiYIKWrpMojKQ__wiLcv_EKPDz_g9tZwin6jqod0TnNGaGgiMlCCHQqwqKFsP4e2i8UxDGhi6A" data-max-custom-scopes="10" data-header-redesign-enabled="false" data-initial-value="" data-blackbird-suggestions-path="/search/suggestions" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" data-current-repository="welldone-software/why-did-you-render" data-current-org="welldone-software" data-current-owner="" data-logged-in="false" data-copilot-chat-enabled="false" data-nl-search-enabled="false" data-retain-scroll-position="true"> <div class="search-input-container search-with-dialog position-relative d-flex flex-row flex-items-center mr-4 rounded" data-action="click:qbsearch-input#searchInputContainerClicked" > <button type="button" class="header-search-button placeholder input-button form-control d-flex flex-1 flex-self-stretch flex-items-center no-wrap width-full py-0 pl-2 pr-0 text-left border-0 box-shadow-none" data-target="qbsearch-input.inputButton" aria-label="Search or jump to…" aria-haspopup="dialog" placeholder="Search or jump to..." data-hotkey=s,/ autocapitalize="off" data-analytics-event="{"location":"navbar","action":"searchbar","context":"global","tag":"input","label":"searchbar_input_global_navbar"}" data-action="click:qbsearch-input#handleExpand" > <div class="mr-2 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </div> <span class="flex-1" data-target="qbsearch-input.inputButtonText">Search or jump to...</span> <div class="d-flex" data-target="qbsearch-input.hotkeyIndicator"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true" class="mr-1"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg> </div> </button> <input type="hidden" name="type" class="js-site-search-type-field"> <div class="Overlay--hidden " data-modal-dialog-overlay> <modal-dialog data-action="close:qbsearch-input#handleClose cancel:qbsearch-input#handleClose" data-target="qbsearch-input.searchSuggestionsDialog" role="dialog" id="search-suggestions-dialog" aria-modal="true" aria-labelledby="search-suggestions-dialog-header" data-view-component="true" class="Overlay Overlay--width-large Overlay--height-auto"> <h1 id="search-suggestions-dialog-header" class="sr-only">Search code, repositories, users, issues, pull requests...</h1> <div class="Overlay-body Overlay-body--paddingNone"> <div data-view-component="true"> <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container" style="border-radius: 12px;" data-target="qbsearch-input.queryBuilderContainer" hidden > <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get"> <query-builder data-target="qbsearch-input.queryBuilder" id="query-builder-query-builder-test" data-filter-key=":" data-view-component="true" class="QueryBuilder search-query-builder"> <div class="FormControl FormControl--fullWidth"> <label id="query-builder-test-label" for="query-builder-test" class="FormControl-label sr-only"> Search </label> <div class="QueryBuilder-StyledInput width-fit " data-target="query-builder.styledInput" > <span id="query-builder-test-leadingvisual-wrap" class="FormControl-input-leadingVisualWrap QueryBuilder-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <div data-target="query-builder.styledInputContainer" class="QueryBuilder-StyledInputContainer"> <div aria-hidden="true" class="QueryBuilder-StyledInputContent" data-target="query-builder.styledInputContent" ></div> <div class="QueryBuilder-InputWrapper"> <div aria-hidden="true" class="QueryBuilder-Sizer" data-target="query-builder.sizer"></div> <input id="query-builder-test" name="query-builder-test" value="" autocomplete="off" type="text" role="combobox" spellcheck="false" aria-expanded="false" aria-describedby="validation-e92858a1-7fe2-4b24-9f40-adc44c2b2bec" data-target="query-builder.input" data-action=" input:query-builder#inputChange blur:query-builder#inputBlur keydown:query-builder#inputKeydown focus:query-builder#inputFocus " data-view-component="true" class="FormControl-input QueryBuilder-Input FormControl-medium" /> </div> </div> <span class="sr-only" id="query-builder-test-clear">Clear</span> <button role="button" id="query-builder-test-clear-button" aria-labelledby="query-builder-test-clear query-builder-test-label" data-target="query-builder.clearButton" data-action=" click:query-builder#clear focus:query-builder#clearButtonFocus blur:query-builder#clearButtonBlur " variant="small" hidden="hidden" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium mr-1 px-2 py-0 d-flex flex-items-center rounded-1 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x-circle-fill Button-visual"> <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path> </svg> </button> </div> <template id="search-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </template> <template id="code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="file-code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code"> <path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path> </svg> </template> <template id="history-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-history"> <path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path> </svg> </template> <template id="repo-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> </template> <template id="bookmark-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bookmark"> <path d="M3 2.75C3 1.784 3.784 1 4.75 1h6.5c.966 0 1.75.784 1.75 1.75v11.5a.75.75 0 0 1-1.227.579L8 11.722l-3.773 3.107A.751.751 0 0 1 3 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.91l3.023-2.489a.75.75 0 0 1 .954 0l3.023 2.49V2.75a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="plus-circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus-circle"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7.25-3.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> </template> <template id="trash-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash"> <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path> </svg> </template> <template id="team-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people"> <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path> </svg> </template> <template id="project-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-project"> <path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25ZM11.75 3a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-8.25.75a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0ZM8 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 3Z"></path> </svg> </template> <template id="pencil-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </template> <template id="copilot-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot"> <path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="copilot-error-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot-error"> <path d="M16 11.24c0 .112-.072.274-.21.467L13 9.688V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-.198 0-.388-.009-.571-.029L6.833 5.226a4.01 4.01 0 0 0 .17-.782c.117-.935-.037-1.395-.241-1.614-.193-.206-.637-.413-1.682-.297-.683.076-1.115.231-1.395.415l-1.257-.91c.579-.564 1.413-.877 2.485-.996 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095Zm-5.083-8.707c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Zm2.511 11.074c-1.393.776-3.272 1.428-5.43 1.428-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.18-.455-.241-.963-.252-1.475L.31 4.107A.747.747 0 0 1 0 3.509V3.49a.748.748 0 0 1 .625-.73c.156-.026.306.047.435.139l14.667 10.578a.592.592 0 0 1 .227.264.752.752 0 0 1 .046.249v.022a.75.75 0 0 1-1.19.596Zm-1.367-.991L5.635 7.964a5.128 5.128 0 0 1-.889.073c-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433 1.539 0 3.089-.505 4.063-.934Z"></path> </svg> </template> <template id="workflow-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-workflow"> <path d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 0 1 5.25 7H4v4a1 1 0 0 0 1 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0 1 14.25 16h-3.5A1.75 1.75 0 0 1 9 14.25v-.75H5A2.5 2.5 0 0 1 2.5 11V7h-.75A1.75 1.75 0 0 1 0 5.25Zm1.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Zm9 9a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="book-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> </template> <template id="code-review-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-review"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 13H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25v-8.5C0 1.784.784 1 1.75 1ZM1.5 2.75v8.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm5.28 1.72a.75.75 0 0 1 0 1.06L5.31 7l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.75.75 0 0 1 1.06 0Zm2.44 0a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.69 7 9.22 5.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="codespaces-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-codespaces"> <path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> </template> <template id="comment-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment"> <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="comment-discussion-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </template> <template id="organization-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-organization"> <path d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="rocket-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-rocket"> <path d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.752 8.752 0 0 1-2.564 6.186l-.458.459c-.314.314-.641.616-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.749.749 0 0 1-1.11-.418l-.954-3.102a1.214 1.214 0 0 1-.145-.125L3.754 9.816a1.218 1.218 0 0 1-.124-.145L.528 8.717a.749.749 0 0 1-.418-1.11l1.71-2.774A1.748 1.748 0 0 1 3.31 4h3.204c.288-.338.59-.665.904-.979l.459-.458A8.749 8.749 0 0 1 14.064 0ZM8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.249 7.249 0 0 0-5.125 2.123ZM3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.234.234 0 0 1-.201-.064.234.234 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12Zm6.94-3.935c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </template> <template id="shield-check-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield-check"> <path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="heart-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart"> <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path> </svg> </template> <template id="server-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-server"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v4c0 .372-.116.717-.314 1 .198.283.314.628.314 1v4a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 12.75v-4c0-.358.109-.707.314-1a1.739 1.739 0 0 1-.314-1v-4C0 1.784.784 1 1.75 1ZM1.5 2.75v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm.25 5.75a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25ZM7 4.75A.75.75 0 0 1 7.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 7 4.75ZM7.75 10h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM3 4.75A.75.75 0 0 1 3.75 4h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 4.75ZM3.75 10h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="globe-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-globe"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM5.78 8.75a9.64 9.64 0 0 0 1.363 4.177c.255.426.542.832.857 1.215.245-.296.551-.705.857-1.215A9.64 9.64 0 0 0 10.22 8.75Zm4.44-1.5a9.64 9.64 0 0 0-1.363-4.177c-.307-.51-.612-.919-.857-1.215a9.927 9.927 0 0 0-.857 1.215A9.64 9.64 0 0 0 5.78 7.25Zm-5.944 1.5H1.543a6.507 6.507 0 0 0 4.666 5.5c-.123-.181-.24-.365-.352-.552-.715-1.192-1.437-2.874-1.581-4.948Zm-2.733-1.5h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.507 6.507 0 0 0-4.666 5.5Zm10.181 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.507 6.507 0 0 0 4.666-5.5Zm2.733-1.5a6.507 6.507 0 0 0-4.666-5.5c.123.181.24.365.353.552.714 1.192 1.436 2.874 1.58 4.948Z"></path> </svg> </template> <template id="issue-opened-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </template> <template id="device-mobile-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-mobile"> <path d="M3.75 0h8.5C13.216 0 14 .784 14 1.75v12.5A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25V1.75C2 .784 2.784 0 3.75 0ZM3.5 1.75v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </template> <template id="package-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-package"> <path d="m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"></path> </svg> </template> <template id="credit-card-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-credit-card"> <path d="M10.75 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"></path><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25ZM14.5 6.5h-13v5.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm0-2.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25V5h13Z"></path> </svg> </template> <template id="play-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </template> <template id="gift-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gift"> <path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"></path> </svg> </template> <template id="code-square-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="device-desktop-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-desktop"> <path d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"></path> </svg> </template> <div class="position-relative"> <ul role="listbox" class="ActionListWrap QueryBuilder-ListWrap" aria-label="Suggestions" data-action=" combobox-commit:query-builder#comboboxCommit mousedown:query-builder#resultsMousedown " data-target="query-builder.resultsList" data-persist-list=false id="query-builder-test-results" ></ul> </div> <div class="FormControl-inlineValidation" id="validation-e92858a1-7fe2-4b24-9f40-adc44c2b2bec" hidden="hidden"> <span class="FormControl-inlineValidation--visual"> <svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg> </span> <span></span> </div> </div> <div data-target="query-builder.screenReaderFeedback" aria-live="polite" aria-atomic="true" class="sr-only"></div> </query-builder></form> <div class="d-flex flex-row color-fg-muted px-3 text-small color-bg-default search-feedback-prompt"> <a target="_blank" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax" data-view-component="true" class="Link color-fg-accent text-normal ml-2"> Search syntax tips </a> <div class="d-flex flex-1"></div> </div> </div> </div> </div> </modal-dialog></div> </div> <div data-action="click:qbsearch-input#retract" class="dark-backdrop position-fixed" hidden data-target="qbsearch-input.darkBackdrop"></div> <div class="color-fg-default"> <dialog-helper> <dialog data-target="qbsearch-input.feedbackDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="feedback-dialog" aria-modal="true" aria-labelledby="feedback-dialog-title" aria-describedby="feedback-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="feedback-dialog-title"> Provide feedback </h1> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="feedback-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="feedback-dialog-title"> <div data-view-component="true" class="Overlay-body"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="code-search-feedback-form" data-turbo="false" action="/search/feedback" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="BSSbuovJ459KRvn5FaVjOM9VZxs0L+Y34KtYFwji2HU1Xm8YrBWahIkhX6P4D8TSfmAKIkIgFoTWEQ7kxSoZtA==" /> <p>We read every piece of feedback, and take your input very seriously.</p> <textarea name="feedback" class="form-control width-full mb-2" style="height: 120px" id="feedback"></textarea> <input name="include_email" id="include_email" aria-label="Include my email address so I can be contacted" class="form-control mr-2" type="checkbox"> <label for="include_email" style="font-weight: normal">Include my email address so I can be contacted</label> </form></div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="feedback-dialog" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="code-search-feedback-form" data-action="click:qbsearch-input#submitFeedback" type="submit" data-view-component="true" class="btn-primary btn"> Submit feedback </button> </div> </dialog></dialog-helper> <custom-scopes data-target="qbsearch-input.customScopesManager"> <dialog-helper> <dialog data-target="custom-scopes.customScopesModalDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="custom-scopes-dialog" aria-modal="true" aria-labelledby="custom-scopes-dialog-title" aria-describedby="custom-scopes-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header Overlay-header--divided"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="custom-scopes-dialog-title"> Saved searches </h1> <h2 id="custom-scopes-dialog-description" class="Overlay-description">Use saved searches to filter your results more quickly</h2> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="custom-scopes-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="custom-scopes-dialog-title"> <div data-view-component="true" class="Overlay-body"> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="Cckl/Ffv70IcKD4IroBvAGXULt/ceVxWGipLN2dEK6cBq5COU18vzYM5obM9ulA9G2fkFMAEWWr7BQhSprxeYA==" /> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField"> <div class="form-group"> <label for="custom_scope_name">Name</label> <auto-check src="/search/custom_scopes/check_name" required> <input type="text" name="custom_scope_name" id="custom_scope_name" data-target="custom-scopes.customScopesNameField" class="form-control" autocomplete="off" placeholder="github-ruby" required maxlength="50"> <input type="hidden" data-csrf="true" value="jd9Vo3r1K28+vxejbzp6YBgXOSdAJt/N4ALBlIgsO/ZtjxO50Rn1r+q2BxPsJM1xvwKcP4UF0rGHxxKI64++cQ==" /> </auto-check> </div> <div class="form-group"> <label for="custom_scope_query">Query</label> <input type="text" name="custom_scope_query" id="custom_scope_query" data-target="custom-scopes.customScopesQueryField" class="form-control" autocomplete="off" placeholder="(repo:mona/a OR repo:mona/b) AND lang:python" required maxlength="500"> </div> <p class="text-small color-fg-muted"> To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>. </p> </form> </div> <div data-target="custom-scopes.manageCustomScopesForm"> <div data-target="custom-scopes.list"></div> </div> </div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd Overlay-footer--divided"> <button data-action="click:custom-scopes#customScopesCancel" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="custom-scopes-dialog-form" data-action="click:custom-scopes#customScopesSubmit" data-target="custom-scopes.customScopesSubmitButton" type="submit" data-view-component="true" class="btn-primary btn"> Create saved search </button> </div> </dialog></dialog-helper> </custom-scopes> </div> </qbsearch-input> <div class="position-relative HeaderMenu-link-wrap d-lg-inline-block"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fwelldone-software%2Fwhy-did-you-render%2Fissues%2F85" class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded rounded-lg-0 px-2 py-1" style="margin-left: 12px;" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/welldone-software/why-did-you-render/issues/85","user_id":null}}" data-hydro-click-hmac="fe499f2b256ee4a059b37b043bbd77c9b76b6f75862d01361293e90c6b441115" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> <a href="/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fvoltron%2Fissues_fragments%2Fissue_layout&source=header-repo&source_repo=welldone-software%2Fwhy-did-you-render" class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/welldone-software/why-did-you-render/issues/85","user_id":null}}" data-hydro-click-hmac="fe499f2b256ee4a059b37b043bbd77c9b76b6f75862d01361293e90c6b441115" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout;ref_cta:Sign up;ref_loc:header logged out"}" > Sign up </a> <button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Reseting focus</button> </div> </div> </div> </div> </header> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-78e0a071-557f-4dfe-88aa-cc53369fad95" aria-labelledby="tooltip-7c9dc76e-5f65-4077-90fb-98db676eea31" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-7c9dc76e-5f65-4077-90fb-98db676eea31" for="icon-button-78e0a071-557f-4dfe-88aa-cc53369fad95" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled > <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class=""> <main id="js-repo-pjax-container" > <div id="repository-container-header" class="pt-3 hide-full-screen" style="background-color: var(--page-header-bgColor, var(--color-page-header-bg));" data-turbo-replace> <div class="d-flex flex-nowrap flex-justify-end mb-3 px-3 px-lg-5" style="gap: 1rem;"> <div class="flex-auto min-width-0 width-fit"> <div class=" d-flex flex-wrap flex-items-center wb-break-word f3 text-normal"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo color-fg-muted mr-2"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> <span class="author flex-self-stretch" itemprop="author"> <a class="url fn" rel="author" data-hovercard-type="organization" data-hovercard-url="/orgs/welldone-software/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/welldone-software"> welldone-software </a> </span> <span class="mx-1 flex-self-stretch color-fg-muted">/</span> <strong itemprop="name" class="mr-2 flex-self-stretch"> <a data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/welldone-software/why-did-you-render">why-did-you-render</a> </strong> <span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span> </div> </div> <div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;"> <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;"> <li> <a href="/login?return_to=%2Fwelldone-software%2Fwhy-did-you-render" rel="nofollow" id="repository-details-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/welldone-software/why-did-you-render/issues/85","user_id":null}}" data-hydro-click-hmac="d8fc8ef1e251216c7337a6ebf28579082c01e8f2735ab31d3335ed52030915d5" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-36b5f877-b61e-4f23-a9ec-7d9b2b682b7d" for="repository-details-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </li> <li> <a icon="repo-forked" id="fork-button" href="/login?return_to=%2Fwelldone-software%2Fwhy-did-you-render" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":157014461,"auth_type":"LOG_IN","originating_url":"https://github.com/welldone-software/why-did-you-render/issues/85","user_id":null}}" data-hydro-click-hmac="cb7400f96b641822f9dba8f007b8bb23e72c518c0ef65d2cc320d9d69f880ca1" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg>Fork <span id="repo-network-counter" data-pjax-replace="true" data-turbo-replace="true" title="199" data-view-component="true" class="Counter">199</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fwelldone-software%2Fwhy-did-you-render" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":157014461,"auth_type":"LOG_IN","originating_url":"https://github.com/welldone-software/why-did-you-render/issues/85","user_id":null}}" data-hydro-click-hmac="4d0f3ca2adbcd08e4435fafbd8bc7bbd3adce0f81d28fc894fdbf710561bc6fa" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> <span id="repo-stars-counter-star" aria-label="11366 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="11,366" data-view-component="true" class="Counter js-social-count">11.4k</span> </a></div> </li> </ul> </div> </div> <div id="responsive-meta-container" data-turbo-replace> </div> <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5"> <ul data-view-component="true" class="UnderlineNav-body list-style-none"> <li data-view-component="true" class="d-inline-flex"> <a id="code-tab" href="/welldone-software/why-did-you-render" data-tab-item="i0code-tab" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments repo_attestations /welldone-software/why-did-you-render" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g c" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Code","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> <span data-content="Code">Code</span> <span id="code-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="issues-tab" href="/welldone-software/why-did-you-render/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /welldone-software/why-did-you-render/issues" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g i" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Issues","target":"UNDERLINE_NAV.TAB"}" aria-current="page" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item selected"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> <span data-content="Issues">Issues</span> <span id="issues-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="35" data-view-component="true" class="Counter">35</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="pull-requests-tab" href="/welldone-software/why-did-you-render/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /welldone-software/why-did-you-render/pulls" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g p" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Pull requests","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> <span data-content="Pull requests">Pull requests</span> <span id="pull-requests-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="7" data-view-component="true" class="Counter">7</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="actions-tab" href="/welldone-software/why-did-you-render/actions" data-tab-item="i3actions-tab" data-selected-links="repo_actions /welldone-software/why-did-you-render/actions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g a" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Actions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> <span data-content="Actions">Actions</span> <span id="actions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="projects-tab" href="/welldone-software/why-did-you-render/projects" data-tab-item="i4projects-tab" data-selected-links="repo_projects new_repo_project repo_project /welldone-software/why-did-you-render/projects" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g b" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Projects","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table UnderlineNav-octicon d-none d-sm-inline"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> <span data-content="Projects">Projects</span> <span id="projects-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="security-tab" href="/welldone-software/why-did-you-render/security" data-tab-item="i5security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /welldone-software/why-did-you-render/security" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g s" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Security","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span data-content="Security">Security</span> <include-fragment src="/welldone-software/why-did-you-render/security/overall-count" accept="text/fragment+html"></include-fragment> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="insights-tab" href="/welldone-software/why-did-you-render/pulse" data-tab-item="i6insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /welldone-software/why-did-you-render/pulse" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Insights","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> <span data-content="Insights">Insights</span> <span id="insights-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> </ul> <div style="visibility:hidden;" data-view-component="true" class="UnderlineNav-actions js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0"> <action-menu data-select-variant="none" data-view-component="true"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-fbc30fa2-f83f-4346-98df-87fdde0692b5-button" popovertarget="action-menu-fbc30fa2-f83f-4346-98df-87fdde0692b5-overlay" aria-controls="action-menu-fbc30fa2-f83f-4346-98df-87fdde0692b5-list" aria-haspopup="true" aria-labelledby="tooltip-cccdaad4-ecc5-4b7c-a214-b58bd7b3e34d" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium UnderlineNav-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-cccdaad4-ecc5-4b7c-a214-b58bd7b3e34d" for="action-menu-fbc30fa2-f83f-4346-98df-87fdde0692b5-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Additional navigation options</tool-tip> <anchored-position id="action-menu-fbc30fa2-f83f-4346-98df-87fdde0692b5-overlay" anchor="action-menu-fbc30fa2-f83f-4346-98df-87fdde0692b5-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-fbc30fa2-f83f-4346-98df-87fdde0692b5-button" id="action-menu-fbc30fa2-f83f-4346-98df-87fdde0692b5-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li hidden="hidden" data-menu-item="i0code-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-899de84c-b4d3-4c4c-bc57-e0b9a611702d" href="/welldone-software/why-did-you-render" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Code </span> </a> </li> <li hidden="hidden" data-menu-item="i1issues-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-b666b37b-1c81-4b5f-ab92-765f787b3f5c" href="/welldone-software/why-did-you-render/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Issues </span> </a> </li> <li hidden="hidden" data-menu-item="i2pull-requests-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-203e8e3d-1aa7-4525-bcf6-f5b48ff385c0" href="/welldone-software/why-did-you-render/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Pull requests </span> </a> </li> <li hidden="hidden" data-menu-item="i3actions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-6709ab7d-cd22-4cbe-ad53-b1353608a563" href="/welldone-software/why-did-you-render/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Actions </span> </a> </li> <li hidden="hidden" data-menu-item="i4projects-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-99139aa9-36be-4811-94ec-4a9491128725" href="/welldone-software/why-did-you-render/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Projects </span> </a> </li> <li hidden="hidden" data-menu-item="i5security-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-cef089d8-3d63-4273-8f3b-a4afc35094b9" href="/welldone-software/why-did-you-render/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Security </span> </a> </li> <li hidden="hidden" data-menu-item="i6insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-c5520901-bef0-478b-9d10-7f7bd19b9818" href="/welldone-software/why-did-you-render/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Insights </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu></div> </nav> </div> <turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class=""> <div id="repo-content-pjax-container" class="repository-content " > <div class="clearfix new-discussion-timeline js-check-all-container container-xl px-3 px-md-4 px-lg-5 mt-4" data-pjax="" data-turbo-frame=""> <div id="show_issue" class="js-issues-results js-socket-channel js-updatable-content" data-morpheus-enabled="false" data-channel="eyJjIjoiaXNzdWU6NTU3OTUzNDQ5OnRpbWVsaW5lIiwidCI6MTczMjg1MjY3NH0=--823a52fd8e12acac4c7c96ab36f05c69c14fb5909e2ebbf544cf13c6aa504a62"> <div id="partial-discussion-header" class="gh-header mb-3 js-details-container Details js-socket-channel js-updatable-content issue" data-channel="eyJjIjoiaXNzdWU6NTU3OTUzNDQ5IiwidCI6MTczMjg1MjY3NH0=--ecba8fd904b23df43e0a266c4964b67916547d5dce76fa12f93fe0b6f0708691" data-url="/welldone-software/why-did-you-render/issues/85/show_partial?partial=issues%2Ftitle&sticky=true" data-gid="MDU6SXNzdWU1NTc5NTM0NDk="> <div class="gh-header-show "> <div class="d-flex flex-column flex-md-row"> <div class="gh-header-actions mt-0 mb-3 mb-md-2 ml-1 flex-md-order-1 flex-shrink-0 d-flex flex-items-center gap-1"> <details class="details-reset details-overlay details-overlay-dark float-right" > <summary class="btn btn-sm btn-primary m-0 ml-0 ml-md-2" > New issue </summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast overflow-auto" aria-label="Sign up for GitHub"> <button aria-label="Close dialog" data-close-dialog="" type="button" data-view-component="true" class="Link--muted btn-link position-absolute p-4 right-0"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="d-flex flex-column p-4"> <div class="mt-3 mb-2 text-center"> <svg height="60" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="60" data-view-component="true" class="octicon octicon-comment-discussion color-fg-accent"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> </div> <div class="px-4"> <p class="text-center mb-4"> <strong>Have a question about this project?</strong> Sign up for a free GitHub account to open an issue and contact its maintainers and the community. </p> <div class="d-flex flex-items-center"> <a href="/signup?return_to=%2Fwelldone-software%2Fwhy-did-you-render%2Fissues%2Fnew%2Fchoose" data-view-component="true" class="btn-primary btn mx-auto"> Sign up for GitHub </a> </div> <p class="mt-4 color-fg-muted text-center">By clicking “Sign up for GitHub”, you agree to our <a class="Link--inTextBlock" href="https://docs.github.com/terms" target="_blank">terms of service</a> and <a class="Link--inTextBlock" href="https://docs.github.com/privacy" target="_blank">privacy statement</a>. We’ll occasionally send you account related emails.</p> <p class="mt-4 color-fg-muted text-center"> Already on GitHub? <a data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"new issue modal","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/welldone-software/why-did-you-render/issues/85","user_id":null}}" data-hydro-click-hmac="75f228600c680aefca9fa6524add54e044077810828933aec6635dbec559ea56" class="Link--inTextBlock" href="/login?return_to=%2Fwelldone-software%2Fwhy-did-you-render%2Fissues%2Fnew%2Fchoose">Sign in</a> to your account </p> </div> </div> </details-dialog> </details> <div class="flex-auto text-right d-block d-md-none"> <a href="#issue-comment-box" class="py-1">Jump to bottom</a> </div> </div> <h1 class="gh-header-title mb-2 lh-condensed f1 mr-0 flex-auto wb-break-word"> <bdi class="js-issue-title markdown-title">trackExtraHooks cannot set property of #<Object> which has only a getter</bdi> <span class="f1-light color-fg-muted">#85</span> </h1> </div> </div> <div class="d-flex flex-items-center flex-wrap mt-0 gh-header-meta"> <div class="flex-shrink-0 mb-2 flex-self-start flex-md-self-center"> <span title="Status: Open" data-view-component="true" class="State State--open d-flex flex-items-center"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened flex-items-center mr-1"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> Open </span> </div> <div class="mb-2 flex-shrink-0"> <div> </div> </div> <div class="flex-shrink-0 mb-2 flex-self-start flex-md-self-center"> </div> <div class="flex-auto min-width-0 mb-2"> <a class="author text-bold Link--secondary" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong">mwskwong</a> opened this issue <relative-time datetime="2020-01-31T07:05:30Z" class="no-wrap">Jan 31, 2020</relative-time> · 63 comments <span data-issue-and-pr-hovercards-enabled> </span> </div> </div> <div class="js-sticky js-sticky-offset-scroll top-0 gh-header-sticky"> <div class="sticky-content"> <div class="d-flex flex-items-center flex-justify-between mt-2"> <div class="d-flex flex-row flex-items-center min-width-0"> <div class="mr-2 mb-2 flex-shrink-0"> <span title="Status: Open" data-view-component="true" class="State State--open d-flex flex-items-center"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened flex-items-center mr-1"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> Open </span> </div> <div class="mb-2 flex-shrink-0"> <div> </div> </div> <div class="mb-2 flex-shrink-0"> </div> <div class="min-width-0 mr-2 mb-2"> <h1 class="d-flex text-bold f5"> <a class="js-issue-title css-truncate css-truncate-target Link--primary width-fit markdown-title js-smoothscroll-anchor" href="#top"> trackExtraHooks cannot set property of #<Object> which has only a getter </a> <span class="gh-header-number color-fg-muted pl-1">#85</span> </h1> <div class="meta color-fg-muted css-truncate css-truncate-target d-block width-fit"> <a class="author text-bold Link--secondary" data-hovercard-z-index-override="111" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong">mwskwong</a> opened this issue <relative-time datetime="2020-01-31T07:05:30Z" class="no-wrap">Jan 31, 2020</relative-time> · 63 comments <span data-issue-and-pr-hovercards-enabled> </span> </div> </div> </div> </div> </div> </div> <div class="gh-header-shadow color-shadow-small js-notification-shelf-offset-top"></div> </div> <div class="d-block d-md-none border-bottom mb-4 f6"> <div class="d-flex mb-3"> <span class="text-bold color-fg-muted col-3 col-sm-2 flex-shrink-0">Labels</span> <div class="min-width-0 d-flex flex-wrap mt-n1"> <a id="label-37e804" href="/welldone-software/why-did-you-render/labels/bug" data-name="bug" style="--label-r:215;--label-g:58;--label-b:74;--label-h:353;--label-s:66;--label-l:53;" data-view-component="true" class="IssueLabel hx_IssueLabel width-fit mb-1 mr-1"> <span class="css-truncate css-truncate-target width-fit">bug</span> </a> <tool-tip id="tooltip-1f896453-5b30-4d76-aed4-3d7bb9d3b97c" for="label-37e804" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">Something isn't working</tool-tip> <a id="label-e227ca" href="/welldone-software/why-did-you-render/labels/Low%20priority" data-name="Low priority" style="--label-r:215;--label-g:226;--label-b:95;--label-h:65;--label-s:69;--label-l:62;" data-view-component="true" class="IssueLabel hx_IssueLabel width-fit mb-1 mr-1"> <span class="css-truncate css-truncate-target width-fit">Low priority</span> </a> <a id="label-75ebe7" href="/welldone-software/why-did-you-render/labels/wontfix" data-name="wontfix" style="--label-r:221;--label-g:221;--label-b:221;--label-h:0;--label-s:0;--label-l:86;" data-view-component="true" class="IssueLabel hx_IssueLabel width-fit mb-1 mr-1"> <span class="css-truncate css-truncate-target width-fit">wontfix</span> </a> <tool-tip id="tooltip-f9d0171d-3f4b-4962-8bb4-5b11a58456bd" for="label-75ebe7" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">This will not be worked on</tool-tip> <a id="label-f992ce" href="/welldone-software/why-did-you-render/labels/workaround%20available" data-name="workaround available" style="--label-r:251;--label-g:202;--label-b:4;--label-h:48;--label-s:96;--label-l:50;" data-view-component="true" class="IssueLabel hx_IssueLabel width-fit mb-1 mr-1"> <span class="css-truncate css-truncate-target width-fit">workaround available</span> </a> <tool-tip id="tooltip-b22bf794-3a7a-46ac-93c9-9f9c55c797dd" for="label-f992ce" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">A workaround is available in the issue's comments</tool-tip> </div> </div> </div> <div id="discussion_bucket"> <div data-view-component="true" class="Layout Layout--flowRow-until-md Layout--sidebarPosition-end Layout--sidebarPosition-flowRow-end"> <div data-view-component="true" class="Layout-main"> <h2 class="sr-only">Comments</h2> <div class="js-quote-selection-container" data-quote-markdown=".js-comment-body" data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled data-team-hovercards-enabled> <div class="js-discussion ml-0 pl-0 ml-md-6 pl-md-3" data-hpc > <div class="TimelineItem pt-0 js-comment-container js-socket-channel js-updatable-content " data-gid="MDU6SXNzdWU1NTc5NTM0NDk=" data-url="/welldone-software/why-did-you-render/issues/85/partials/body?issue=85" data-channel="eyJjIjoiaXNzdWU6NTU3OTUzNDQ5IiwidCI6MTczMjg1MjY3NX0=--5636ac80d598568dde2770cb2872a260ffece73a02297c7e9cb470503f6c02da"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/32725014?s=80&u=4f04bccc287264ac62196a26da2574d2e34363e8&v=4" width="40" height="40" alt="@mwskwong" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issue-557953449"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="e8553ad54b360484c4eb72b7043af090ba15e97c5f50900cdc2c08144bc5b01a"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issue-557953449-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong">mwskwong</a> </strong> commented <a href="#issue-557953449" id="issue-557953449-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-01-31T07:05:30Z" class="no-wrap">Jan 31, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">By specifying <code class="notranslate">trackExtraHooks</code>, the following error is thrown.<br> <strong>NOTE: The error is only thrown when running in local machine, NOT in codesandbox.</strong></p> <p dir="auto">Reproduction link:<br> <a href="https://codesandbox.io/s/awesome-poitras-wkp0k?fontsize=14&hidenavigation=1&theme=dark" rel="nofollow"><img src="https://camo.githubusercontent.com/ecd139ba9847d0c77607c86339eb8ee6939ca85143a92ae16ebf20f58325e1b6/68747470733a2f2f636f646573616e64626f782e696f2f7374617469632f696d672f706c61792d636f646573616e64626f782e737667" alt="Edit why-did-you-render-test" data-canonical-src="https://codesandbox.io/static/img/play-codesandbox.svg" style="max-width: 100%;"></a></p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="whyDidYouRender.js:167 Uncaught TypeError: Cannot set property useSelector of #<Object> which has only a getter at whyDidYouRender.js:167 at Array.forEach (<anonymous>) at zn (whyDidYouRender.js:150) at Module../src/index.js (index.js:9) at __webpack_require__ (bootstrap:785) at fn (bootstrap:150) at Object.1 (styles.css?f684:43) at __webpack_require__ (bootstrap:785) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.chunk.js:1 (anonymous) @ whyDidYouRender.js:167 zn @ whyDidYouRender.js:150 ./src/index.js @ index.js:9 __webpack_require__ @ bootstrap:785 fn @ bootstrap:150 1 @ styles.css?f684:43 __webpack_require__ @ bootstrap:785 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 manifest.json:1 Manifest: Line: 1, column: 1, Syntax error."><pre class="notranslate"><code class="notranslate">whyDidYouRender.js:167 Uncaught TypeError: Cannot set property useSelector of #<Object> which has only a getter at whyDidYouRender.js:167 at Array.forEach (<anonymous>) at zn (whyDidYouRender.js:150) at Module../src/index.js (index.js:9) at __webpack_require__ (bootstrap:785) at fn (bootstrap:150) at Object.1 (styles.css?f684:43) at __webpack_require__ (bootstrap:785) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.chunk.js:1 (anonymous) @ whyDidYouRender.js:167 zn @ whyDidYouRender.js:150 ./src/index.js @ index.js:9 __webpack_require__ @ bootstrap:785 fn @ bootstrap:150 1 @ styles.css?f684:43 __webpack_require__ @ bootstrap:785 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 manifest.json:1 Manifest: Line: 1, column: 1, Syntax error. </code></pre></div> </td> </tr> <tr class="d-block pl-3 pr-3 pb-3 js-comment-body-error" hidden> <td class="d-block"> <div class="flash flash-warn" role="alert"> <p class="mb-1"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-info"> <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> The text was updated successfully, but these errors were encountered: </p> <ol class="mb-0 pl-4 ml-4"> </ol> </div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="4XwbTBdZA7cmV-fE7h8JFK4bALKja3bZgyqqWjROCXEg9KwPagGAI0Gp4UQCGTRJTYfc-0HS1ycmnOgXulPAGQ" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDU6SXNzdWU1NTc5NTM0NDk="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-8e29bd" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">40</span> </button> <tool-tip id="tooltip-8bfe77e8-5cf3-4bef-b0c0-dbe7b2c76468" for="reactions--reaction_button_component-8e29bd" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">jojo080889, tregusti, PierreMage, SEI-John, chadi-kazan, ronen, noah79, olejorgenb, feimosi, jfrumar-infinitusai, and 30 more reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="jojo080889, tregusti, PierreMage, SEI-John, chadi-kazan, ronen, noah79, olejorgenb, feimosi, jfrumar-infinitusai, and 30 more reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>40 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issue-557953449-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issues/85" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="AbuMQddDsjebY50gBYzxsvxu6viAWKMxZI//+VDBiIUMi6zk5VxxYr2h3LCVhLRKrBDUskk5YDEM8hVbj8AbXA==" /></form> </div> </div> </div> <div> <div id="js-timeline-progressive-loader" data-timeline-item-src="welldone-software/why-did-you-render/timeline_focused_item?after_cursor=Y3Vyc29yOnYyOpPPAAABcSJH_2ACqjEwMjc2NzkyNjA%3D&before_cursor=Y3Vyc29yOnYyOpPPAAABdK3B9mAAqTY5NTg0NzU1Ng%3D%3D&id=MDU6SXNzdWU1NTc5NTM0NDk%3D" ></div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDYyMTk2Mg=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDYyMTk2Mg==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4MDYyMTk2Mg==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-580621962"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="74ed4847312b221a0296082f3db76d77eeb0c6b86a2f886af721b771e3d3a25a"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-580621962-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-580621962" id="issuecomment-580621962-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-01-31T07:42:52Z" class="no-wrap">Jan 31, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">try using <code class="notranslate">import * as ReactRedux from 'react-redux'</code> instead.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="5kHndq8TaER0RGjjcptfKxLpBzYpFdsW8kUEzSlAUEgnyVA10kvr0BO6bmOenWJ28XXbf8useuhX80aAp12ZIA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4MDYyMTk2Mg=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-c9b643" value="THUMBS_DOWN react" data-button-index-position="1" data-reaction-label="-1" data-reaction-content="-1" aria-pressed="false" aria-label="react with thumbs down" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="-1" fallback-src="https://github.githubassets.com/assets/1f44e-ce91733aae25.png" class="social-button-emoji">👎</g-emoji> <span class="js-discussion-reaction-group-count">12</span> </button> <tool-tip id="tooltip-8ef04ffd-6aa6-4d74-a98f-cfcc3d195867" for="reactions--reaction_button_component-c9b643" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">alextrastero, rehman-00001, dipunj, tuscias, Arelav, khanzzirfan, abhatia1994, lochungtin, lukaszhryniewicki, aminedammak, and 2 more reacted with thumbs down emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="alextrastero, rehman-00001, dipunj, tuscias, Arelav, khanzzirfan, abhatia1994, lochungtin, lukaszhryniewicki, aminedammak, and 2 more reacted with thumbs down emoji"> <g-emoji alias="-1" fallback-src="https://github.githubassets.com/assets/1f44e-ce91733aae25.png" class="social-button-emoji mr-2">👎</g-emoji> <span>12 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-580621962-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/580621962" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="I3opI2+z/GOaNvhU8qqDXDhJuBBWAVO0AoDoUJjtL66arftznsVE5KCQTrkj/k3RVur+i9ga7z1H0JyIiFOt5w==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/580621962/edit_form?textarea_id=issuecomment-580621962-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDYyMjczNw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDYyMjczNw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4MDYyMjczNw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/32725014?s=80&u=4f04bccc287264ac62196a26da2574d2e34363e8&v=4" width="40" height="40" alt="@mwskwong" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-580622737"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="d6a4dbb63fb963175ca5b9ddd378578ab86a746850efcb64858231f10a06f8af"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-580622737-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user is the author of this issue." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Author</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong">mwskwong</a> </strong> commented <a href="#issuecomment-580622737" id="issuecomment-580622737-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-01-31T07:45:34Z" class="no-wrap">Jan 31, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDU4MDYyMjczNw==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <blockquote> <p dir="auto">try using <code class="notranslate">import * as ReactRedux from 'react-redux'</code> instead.</p> </blockquote> <p dir="auto"><strong>Codesandbox edited</strong><br> Same result</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="siinl5lJtUn2LwdS_bU9HJu18jTjQ03aXAlQymHv8sFzoBDU5BE23ZHRAdIRswBBeCkufQH67CT5vxKH7_I7qQ" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4MDYyMjczNw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-580622737-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/580622737" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="8F+qPpD1hplwidQjo6rOksLLlAQvvd2qRDSWA+RV1DmlGxSucTjTIYlABTcREUKWohxityd2UyVxjTahgY3s+w==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/580622737/edit_form?textarea_id=issuecomment-580622737-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDYzMjk5Ng=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDYzMjk5Ng==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4MDYzMjk5Ng==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-580632996"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="0730ec37f644e51d3ba14206122eae5ac9b1ce303f685646ab14c4a28e05fc4a"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-580632996-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-580632996" id="issuecomment-580632996-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-01-31T08:19:56Z" class="no-wrap">Jan 31, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">I think it has to do with your transpiler (probably babel).<br> put a breakpoint before running WDYR.</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5188459/73523250-1c6a0900-4413-11ea-8f15-4af56ace617c.png"><img src="https://user-images.githubusercontent.com/5188459/73523250-1c6a0900-4413-11ea-8f15-4af56ace617c.png" alt="image" style="max-width: 100%;"></a></p> <p dir="auto">see if React is there, WDYR is there and also there's a "useSelector" in React Redux</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="9eAEHb2jZgFuskq9NTuuVTbxM1o2zjA5sBa09RJUEKQ0aLNewPvllQlMTD3ZPZMI1W3vE9R3kccVoPa4nEnZzA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4MDYzMjk5Ng=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-580632996-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/580632996" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="xjEqBRxDJXvQ/jLemM7GUvHMSaQNdDzsdCKRlQCaHha2INfq0mTtJIyxlolsLeVtwx+kB4y1mg3h/zuoWGVhhw==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/580632996/edit_form?textarea_id=issuecomment-580632996-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY0MTIwMw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY0MTIwMw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4MDY0MTIwMw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/32725014?s=80&u=4f04bccc287264ac62196a26da2574d2e34363e8&v=4" width="40" height="40" alt="@mwskwong" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-580641203"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="26b23c63431604afedf797fb86318f276b74ea5bf14b2573ae5f8623046e5859"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-580641203-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user is the author of this issue." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Author</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong">mwskwong</a> </strong> commented <a href="#issuecomment-580641203" id="issuecomment-580641203-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-01-31T08:46:09Z" class="no-wrap">Jan 31, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">It seems that React, WDYR and <code class="notranslate">useSelector</code> all exists. It's just the fact that the compiler thinks WDYR is trying to set a getter-only property.</p> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/32725014/73524765-c87a1700-4448-11ea-8a00-4c4e0ba95426.png"><img src="https://user-images.githubusercontent.com/32725014/73524765-c87a1700-4448-11ea-8a00-4c4e0ba95426.png" alt="image" style="max-width: 100%;"></a><br> <a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/32725014/73524859-f3fd0180-4448-11ea-9c26-17426bfb51d7.png"><img src="https://user-images.githubusercontent.com/32725014/73524859-f3fd0180-4448-11ea-9c26-17426bfb51d7.png" alt="image" style="max-width: 100%;"></a></p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="Xoz3bOmUEB-hRxHMXbGrxYH1qIyQF34NA9luMCgJNn-fBEAvlMyTi8a5F0yxt5aYYml0xXKu3_Ombyx9phT_Fw" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4MDY0MTIwMw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-580641203-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/580641203" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="lg6phIVKQ8rhGPDSt8uvCHRJjCAN99eo2crgGorh1NSDC5tTohyn4CjoqAfykPKR+dDoX/819D66W726ZtvrJA==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/580641203/edit_form?textarea_id=issuecomment-580641203-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY0MzE4Mw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY0MzE4Mw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4MDY0MzE4Mw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-580643183"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="30206b329f89c67279764b37292262c655acbc7c1c8a26f804739e6bdf68e017"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-580643183-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-580643183" id="issuecomment-580643183-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-01-31T08:52:25Z" class="no-wrap">Jan 31, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">what version of webpack do you use?</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="C4Is2_EQ1LcbQMVdy95iHhAdsxQV6yiRxxY4PbFu3XbKCpuYjEhXI3y-w90n2F9D84FvXfdSiW9ioHpwP3MUHg" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4MDY0MzE4Mw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-580643183-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/580643183" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="jVIHXybkg0eylGcIn4PfNXuwPDgaQKtumg7k6LqXYtEi3IlbQtFUx3s/6GOM1nVwjNoL2jA6BLBmWuRrWqvpdQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/580643183/edit_form?textarea_id=issuecomment-580643183-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY0ODgyMA=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY0ODgyMA==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4MDY0ODgyMA==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/32725014?s=80&u=4f04bccc287264ac62196a26da2574d2e34363e8&v=4" width="40" height="40" alt="@mwskwong" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-580648820"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="46198acb83fe76ca99c8545e0251965978a5e054f2cfb881d78495e772acbd4d"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-580648820-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user is the author of this issue." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Author</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong">mwskwong</a> </strong> commented <a href="#issuecomment-580648820" id="issuecomment-580648820-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-01-31T09:08:59Z" class="no-wrap">Jan 31, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDU4MDY0ODgyMA==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">I'm using CRA so it is managed internally.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="zxBEf68VDSCqstxQYpAZW8WdUovnaS08jDcYoiXvVrcOmPM80k2OtM1M2tCOliQGJgGOwgXQjMIpgVrvq_Kf3w" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4MDY0ODgyMA=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-58a926" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">1</span> </button> <tool-tip id="tooltip-c6df53b6-da2f-4d30-b1c5-79ba4bf87246" for="reactions--reaction_button_component-58a926" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">rehman-00001 reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="rehman-00001 reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>1 reaction</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-580648820-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/580648820" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="qfbca0BS5xAtnKLH3v+I8u8rJtfk6NpCnxmeZdP0gqTB4lyR5GOeH84ht1KKD1FwNUgwKdueXhox4j7ahEM3ZA==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/580648820/edit_form?textarea_id=issuecomment-580648820-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY0OTU5Mw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY0OTU5Mw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4MDY0OTU5Mw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-580649593"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="72c06cf88bf57892b4aa8b4800f5c249bf9354e6d522d2118826553d5774397c"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-580649593-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-580649593" id="issuecomment-580649593-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-01-31T09:11:13Z" class="no-wrap">Jan 31, 2020</relative-time></a> via email <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-mail"> <path d="M1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25v-8.5C0 2.784.784 2 1.75 2ZM1.5 12.251c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V5.809L8.38 9.397a.75.75 0 0 1-.76 0L1.5 5.809v6.442Zm13-8.181v-.32a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25v.32L8 7.88Z"></path> </svg> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body email-format js-comment-body"> <div class="email-fragment">same version as in the sandbox?</div> <span class="email-hidden-toggle"><a href="#">…</a></span><div class="email-hidden-reply"> <div class="email-quoted-reply">On Fri, Jan 31, 2020 at 11:09 AM matthewkwong2 ***@***.***> wrote: I'm using CRA, and does NOT eject so it is managed internally. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="557953449" data-permission-text="Title is private" data-url="https://github.com/welldone-software/why-did-you-render/issues/85" href="https://github.com/welldone-software/why-did-you-render/issues/85">#85</a>?email_source=notifications&email_token=ABHSW25Z3T3J4WLJ7HYHQL3RAPTCZA5CNFSM4KOCOXJ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKN765A#issuecomment-580648820>, or unsubscribe <<a href="https://github.com/notifications/unsubscribe-auth/ABHSW2YEJRMYXHANE2Q46LTRAPTCZANCNFSM4KOCOXJQ">https://github.com/notifications/unsubscribe-auth/ABHSW2YEJRMYXHANE2Q46LTRAPTCZANCNFSM4KOCOXJQ</a>> . </div> <div class="email-fragment"></div> </div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="vrgAPHgxcqZuIhHFmoUSS6hx12j9JxAqr5nUkyLOLHR_MLd_BWnxMgncF0V2gy8WS-0LIR-esdQKL5berNPlHA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4MDY0OTU5Mw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-580649593-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/580649593" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="AgCe29LYuapD88eaYBCBVRvYTTdmQOrLLwUy5yGUCHiW66ZuOM8ZXodf9h/mbHYY6646Xrx2qVSu66AcJAt4ew==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/580649593/edit_form?textarea_id=issuecomment-580649593-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY1NDkxNw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY1NDkxNw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4MDY1NDkxNw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/32725014?s=80&u=4f04bccc287264ac62196a26da2574d2e34363e8&v=4" width="40" height="40" alt="@mwskwong" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-580654917"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="590a67cee6d93c8841b9799db1624ffcb434f4d30e31f25976aabd8afa2b8a0b"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-580654917-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user is the author of this issue." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Author</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong">mwskwong</a> </strong> commented <a href="#issuecomment-580654917" id="issuecomment-580654917-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-01-31T09:25:28Z" class="no-wrap">Jan 31, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">All latest</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="cpGYTtkP8WLycp-UG3eQJ6GMKRXDkSEQchDC0nB657SzGS8NpFdy9pWMmRT3ca16QhD1XCEogO7XpoCf_mcu3A" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4MDY1NDkxNw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-580654917-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/580654917" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="J/t66TwVGNYyRC+tZXDb3t9wCXPMRPJC84w37hXXKTt2zz8GAdyyjJWgeIDNZRfreS7hIOFL60ClY9t3/wHNuQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/580654917/edit_form?textarea_id=issuecomment-580654917-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY1NTIzNg=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MDY1NTIzNg==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4MDY1NTIzNg==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/32725014?s=80&u=4f04bccc287264ac62196a26da2574d2e34363e8&v=4" width="40" height="40" alt="@mwskwong" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-580655236"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="fb349c1fde3b03b4ff208f4a64925234e5343576790e1322b47a09c0df6c1d99"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-580655236-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user is the author of this issue." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Author</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong">mwskwong</a> </strong> commented <a href="#issuecomment-580655236" id="issuecomment-580655236-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-01-31T09:26:22Z" class="no-wrap">Jan 31, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" "@welldone-software/why-did-you-render": "latest", "react": "latest", "react-dom": "latest", "react-redux": "latest", "react-scripts": "latest", "redux": "latest""><pre class="notranslate"><code class="notranslate"> "@welldone-software/why-did-you-render": "latest", "react": "latest", "react-dom": "latest", "react-redux": "latest", "react-scripts": "latest", "redux": "latest" </code></pre></div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="Iwqts5myXwiJkxlzliLZgQupKegIUqXsWHtUm_kwaRzighrw5OrcnO5tH_N6JOTc6DX1oerrBBL9zRbWdy2gdA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4MDY1NTIzNg=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-71f7d6" value="THUMBS_DOWN react" data-button-index-position="1" data-reaction-label="-1" data-reaction-content="-1" aria-pressed="false" aria-label="react with thumbs down" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="-1" fallback-src="https://github.githubassets.com/assets/1f44e-ce91733aae25.png" class="social-button-emoji">👎</g-emoji> <span class="js-discussion-reaction-group-count">1</span> </button> <tool-tip id="tooltip-964ea4a1-bed3-45ae-902a-7955b29673b0" for="reactions--reaction_button_component-71f7d6" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">y1n0 reacted with thumbs down emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="y1n0 reacted with thumbs down emoji"> <g-emoji alias="-1" fallback-src="https://github.githubassets.com/assets/1f44e-ce91733aae25.png" class="social-button-emoji mr-2">👎</g-emoji> <span>1 reaction</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-580655236-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/580655236" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="sH653QVpq13b7Rf5kGNXH/1G7CyfahcFDcpGeU6ZZ43fWue6+fuHp8ZE+w3rlAnh/yR/L7FBpJZAeeUJbbuwhQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/580655236/edit_form?textarea_id=issuecomment-580655236-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MTE0ODExOQ=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4MTE0ODExOQ==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4MTE0ODExOQ==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-581148119"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="7dca553d7dcf33436f7a91e5039139f24d71488b53c76ece7e5d398a3ebeb53f"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-581148119-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-581148119" id="issuecomment-581148119-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-02-02T15:48:48Z" class="no-wrap">Feb 2, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDU4MTE0ODExOQ==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">Sadly, webpack produces immutable objects when compiles es imports and exports.<br> Currently, the only way to make it work is to use the "umd" version of the library being exported. At least in development:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" resolve: { alias: { 'react-redux': process.env.NODE_ENV === 'development' ? 'react-redux/lib' : 'react-redux' } }"><pre class="notranslate"><code class="notranslate"> resolve: { alias: { 'react-redux': process.env.NODE_ENV === 'development' ? 'react-redux/lib' : 'react-redux' } } </code></pre></div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="1uH1hverpLkxeXHCPBHCR-ZNKTErKxveqH_qbfI097MXaULFivMnLVaHd0LQF_8aBdH1eMmSuiANyaggfCk-2w" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4MTE0ODExOQ=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-bbac6a" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">3</span> </button> <tool-tip id="tooltip-e52df3bc-fed7-4c1b-867c-b7a2ad934265" for="reactions--reaction_button_component-bbac6a" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">0xdevalias, aphillipo, and artzub reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="0xdevalias, aphillipo, and artzub reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>3 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-581148119-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/581148119" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="IeGJDMBlTKU+HcMNcmv7KOHEAC+6Js0HgVbCNh7xEuYXt+REXz9SHjinp/0X9IGLK1JDfDhcpLJKhy364JfJYg==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/581148119/edit_form?textarea_id=issuecomment-581148119-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOkxhYmVsZWRFdmVudDMwMDAxMTE0Mjc="> <div class="TimelineItem js-targetable-element" data-team-hovercards-enabled id="event-3000111427"> <div class="TimelineItem-badge "> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-tag color-fg-inherit"> <path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path> </svg> </div> <div class="TimelineItem-body"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=40&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="20" height="20" alt="@vzaidman" /></a> <a class="author Link--primary text-bold" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> added <a id="label-1a50d3" href="/welldone-software/why-did-you-render/labels/bug" data-name="bug" style="--label-r:215;--label-g:58;--label-b:74;--label-h:353;--label-s:66;--label-l:53;" data-view-component="true" class="IssueLabel hx_IssueLabel d-inline-block v-align-middle"> bug </a> <tool-tip id="tooltip-39a02c38-75f8-42a4-ae7e-1896b76bdc31" for="label-1a50d3" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">Something isn't working</tool-tip> <a id="label-5d92fa" href="/welldone-software/why-did-you-render/labels/Low%20priority" data-name="Low priority" style="--label-r:215;--label-g:226;--label-b:95;--label-h:65;--label-s:69;--label-l:62;" data-view-component="true" class="IssueLabel hx_IssueLabel d-inline-block v-align-middle"> Low priority </a> <a id="label-ff577f" href="/welldone-software/why-did-you-render/labels/wontfix" data-name="wontfix" style="--label-r:221;--label-g:221;--label-b:221;--label-h:0;--label-s:0;--label-l:86;" data-view-component="true" class="IssueLabel hx_IssueLabel d-inline-block v-align-middle"> wontfix </a> <tool-tip id="tooltip-9ac2e731-9819-4947-b591-03df76661034" for="label-ff577f" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">This will not be worked on</tool-tip> <a id="label-46b067" href="/welldone-software/why-did-you-render/labels/workaround%20available" data-name="workaround available" style="--label-r:251;--label-g:202;--label-b:4;--label-h:48;--label-s:96;--label-l:50;" data-view-component="true" class="IssueLabel hx_IssueLabel d-inline-block v-align-middle"> workaround available </a> <tool-tip id="tooltip-6d3f3e3d-9ee1-40ea-b9db-427e48e49b1f" for="label-46b067" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">A workaround is available in the issue's comments</tool-tip> labels <a href="#event-3000111427" class="Link--secondary"><relative-time datetime="2020-02-02T15:49:03Z" class="no-wrap">Feb 2, 2020</relative-time></a> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4OTk3NDQ2Mw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4OTk3NDQ2Mw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4OTk3NDQ2Mw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/DalderupMaurice/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/DalderupMaurice"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/10922045?s=80&u=83026ff120c037d21e4486804601645c1e038bb8&v=4" width="40" height="40" alt="@DalderupMaurice" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-589974463"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="cbd46bf6d73c4e53d52063eb21ff4c4e4c68e3b19b29abed1ec1bbf3380b1b24"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-589974463-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/DalderupMaurice/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/DalderupMaurice">DalderupMaurice</a> </strong> commented <a href="#issuecomment-589974463" id="issuecomment-589974463-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-02-22T16:47:38Z" class="no-wrap">Feb 22, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">How are we able to fix this without ejecting the webpack config?<br> I am unable to use the library as intended with this issue and IMO it shouldn't be low priority/wontfix at all as a lot of people use CRA and will probably experience the same issue.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="jww4UyLtrscWGWz5JNX5uniTwofgJiwZZGJ_gYkr1pFOhI8QX7UtU3HnannI08Tnmw8ezgKfjefB1D3MBzYf-Q" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4OTk3NDQ2Mw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-fd281f" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">16</span> </button> <tool-tip id="tooltip-c685ac2c-316e-4773-a76c-3283cfb1e597" for="reactions--reaction_button_component-fd281f" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">chadi-kazan, cstoddart, olejorgenb, feimosi, typeofweb, atulic, liubhub, ZefirTheFear, Nantris, 0xdevalias, and 6 more reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="chadi-kazan, cstoddart, olejorgenb, feimosi, typeofweb, atulic, liubhub, ZefirTheFear, Nantris, 0xdevalias, and 6 more reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>16 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-589974463-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/589974463" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="8btebaMjnaCIjw1oFVB3X17/Mljw1pSD5Ed8KhiV3GneOyTubPkhAcnAiG0hVdZ6mUC/5cV+b4HiAjUfrPve0g==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/589974463/edit_form?textarea_id=issuecomment-589974463-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4OTk4MzczNg=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU4OTk4MzczNg==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU4OTk4MzczNg==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-589983736"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="24219a874a5077427cf64087cfc0c76868f2ef3222f5e49fafea14d3da2e7f43"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-589983736-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-589983736" id="issuecomment-589983736-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-02-22T18:17:31Z" class="no-wrap">Feb 22, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDU4OTk4MzczNg==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">I believe <strong>theres no way to do it with CRA alone</strong> at the moment.</p> <p dir="auto">You can use:<br> <a href="https://www.npmjs.com/package/react-app-rewired" rel="nofollow">https://www.npmjs.com/package/react-app-rewired</a></p> <p dir="auto">To add alias to webpack as mentioned above.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="Lvk4ExYAjWoL5U2AAbXykyouTWVqC6FVxGJOlBaw1F_vcY9Qa1gO_mwbSwDts8_OybKRLIiyAKth1AzZmK0dNw" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU4OTk4MzczNg=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-70e3d9" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">4</span> </button> <tool-tip id="tooltip-5e2f3e10-9e42-4dcb-8874-467e0ec0efc5" for="reactions--reaction_button_component-70e3d9" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">DalderupMaurice, olejorgenb, Nantris, and 0xdevalias reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="DalderupMaurice, olejorgenb, Nantris, and 0xdevalias reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>4 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-589983736-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/589983736" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="sCTGrUmNCRSoZ7pfyN7oxN4BtrD/Tn+e9lrry3XFccz7zlfNf0jf562VKipxpJCWD2821G8eXXBpEUxjFZmlRQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/589983736/edit_form?textarea_id=issuecomment-589983736-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5MDA3NjQwMQ=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5MDA3NjQwMQ==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU5MDA3NjQwMQ==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/karol-majewski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/karol-majewski"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/20233319?s=80&u=7e298a94757460baaef7e9acfa1bc51468d6bb35&v=4" width="40" height="40" alt="@karol-majewski" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-590076401"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="41f59206f24583eb2b18052837a807fbd496321c60466f21b0c73826ecb8c505"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-590076401-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/karol-majewski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/karol-majewski">karol-majewski</a> </strong> commented <a href="#issuecomment-590076401" id="issuecomment-590076401-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-02-23T14:50:46Z" class="no-wrap">Feb 23, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">In my Webpack config, I included the UMD build by doing:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" alias: { 'react-redux': isDevelopment ? 'react-redux/dist/react-redux.js' : 'react-redux/lib', },"><pre class="notranslate"> <span class="pl-s1">alias</span>: <span class="pl-kos">{</span> <span class="pl-s">'react-redux'</span>: <span class="pl-s1">isDevelopment</span> ? <span class="pl-s">'react-redux/dist/react-redux.js'</span> : <span class="pl-s">'react-redux/lib'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div> <p dir="auto">The <code class="notranslate">Cannot set property useSelector of #<Object> which has only a getter</code> error is gone. However, how do I know it actually worked? I created a component based on <a href="https://medium.com/welldone-software/why-did-you-render-v4-released-48e0f0b99d4c" rel="nofollow">the example</a> to see if the silly usage of <code class="notranslate">useSelector</code> gets detected.</p> <div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const User: React.FunctionComponent = React.memo(() => { const s = useSelector(state => ({ auth: { userId: state.auth?.userId } })); return <div>{s.auth?.userId}</div>; });"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-smi">User</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">FunctionComponent</span> <span class="pl-c1">=</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-en">memo</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-k">const</span> <span class="pl-s1">s</span> <span class="pl-c1">=</span> <span class="pl-en">useSelector</span><span class="pl-kos">(</span><span class="pl-s1">state</span> <span class="pl-c1">=></span> <span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">auth</span>: <span class="pl-kos">{</span> <span class="pl-c1">userId</span>: <span class="pl-s1">state</span><span class="pl-kos">.</span><span class="pl-c1">auth</span><span class="pl-kos">?.</span><span class="pl-c1">userId</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">return</span> <span class="pl-kos"><</span><span class="pl-smi">div</span><span class="pl-kos">></span><span class="pl-kos">{</span>s<span class="pl-kos"></span><span class="pl-kos">.</span><span class="pl-c1">auth</span><span class="pl-kos">?.</span><span class="pl-c1">userId</span><span class="pl-kos">}</span><span class="pl-c1"><</span><span class="pl-c1">/</span>div>; <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">My settings:</p> <div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" whyDidYouRender(React, { trackExtraHooks: [[require('react-redux'), 'useSelector']], });"><pre class="notranslate"> <span class="pl-en">whyDidYouRender</span><span class="pl-kos">(</span><span class="pl-smi">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">trackExtraHooks</span>: <span class="pl-kos">[</span><span class="pl-kos">[</span><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'react-redux'</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">'useSelector'</span><span class="pl-kos">]</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">Nothing ever gets logged in the console. What am I doing wrong?</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="u1RfpB_yIHrraU5-cBjsBN-M64a30tWeSQPFozPQhVl63OjnYqqj7oyXSP6cHtFZPBA3z1VrdGDstYfuvc1MMQ" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU5MDA3NjQwMQ=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-590076401-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/590076401" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="ELnTtlrjME9dyGj7V2F2ZYTjN9Ie1OelynaY2aT5IHbbmDHZ0jEjOBgOtd3PYAtO9T8+SG6ZiOk/Ya60MLBtQA==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/590076401/edit_form?textarea_id=issuecomment-590076401-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5MDA3OTE1Nw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5MDA3OTE1Nw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU5MDA3OTE1Nw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-590079157"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="764aa41b025ad65ffe968f1c8f22d5efa171d3c9299cd19dd2c1f198b55b1251"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-590079157-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-590079157" id="issuecomment-590079157-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-02-23T15:18:21Z" class="no-wrap">Feb 23, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">the library only tracks the re-renders (including re-renders as a result of hook changes) on selected components.</p> <p dir="auto">you are missing the tracking of the "User" component.</p> <p dir="auto">to do so, add:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="User.whyDidYouRender = true;"><pre class="notranslate"><code class="notranslate">User.whyDidYouRender = true; </code></pre></div> <p dir="auto">or you can set the library to track all pure components:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" whyDidYouRender(React, { trackAllPureComponents: true, trackExtraHooks: [[require('react-redux'), 'useSelector']], });"><pre class="notranslate"><code class="notranslate"> whyDidYouRender(React, { trackAllPureComponents: true, trackExtraHooks: [[require('react-redux'), 'useSelector']], }); </code></pre></div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="FO9vfjsptbBZ95pAyCMPRp2jkn1zStKTmU8Ld5CTTXPVZ9g9RnE2JD4JnMAkJTIbfj9ONJHzc208-Uk6Ho6EGw" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU5MDA3OTE1Nw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-590079157-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/590079157" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="7adPra/0rR8Fy3LICFA7BPZ5f7Ru5IQuJkHXTAXvAqxIuf5UiqtuBrS0DyiGfJ5MdJx9YCWU91F2/rxioUrjVQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/590079157/edit_form?textarea_id=issuecomment-590079157-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5MDExNTA5Ng=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5MDExNTA5Ng==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU5MDExNTA5Ng==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/karol-majewski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/karol-majewski"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/20233319?s=80&u=7e298a94757460baaef7e9acfa1bc51468d6bb35&v=4" width="40" height="40" alt="@karol-majewski" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-590115096"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="a0c3b057236183756081df3007c13be03fc85833c7e8416a698c82e0f9085430"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-590115096-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/karol-majewski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/karol-majewski">karol-majewski</a> </strong> commented <a href="#issuecomment-590115096" id="issuecomment-590115096-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-02-23T20:56:26Z" class="no-wrap">Feb 23, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDU5MDExNTA5Ng==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">My apologies. I did have <code class="notranslate">whyDidYouRender</code> enabled, but my mistake was even more silly. I was using a proxied selector that wraps the one provided by <code class="notranslate">react-redux</code>.</p> <div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { useSelector as useSelector_ } from 'react-redux'; export const useSelector: <T>(selector: (state: State) => T, equalityFn?: (left: T, right: T) => boolean) => T = useSelector_;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">useSelector</span> <span class="pl-k">as</span> <span class="pl-s1">useSelector_</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-redux'</span><span class="pl-kos">;</span> <span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-s1">useSelector</span>: <span class="pl-c1"><</span><span class="pl-smi">T</span><span class="pl-c1">></span><span class="pl-kos">(</span><span class="pl-s1">selector</span>: <span class="pl-kos">(</span><span class="pl-s1">state</span>: <span class="pl-smi">State</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-s1">equalityFn</span>?: <span class="pl-kos">(</span><span class="pl-s1">left</span>: <span class="pl-smi">T</span><span class="pl-kos">,</span> <span class="pl-s1">right</span>: <span class="pl-smi">T</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-smi">boolean</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-smi">T</span> <span class="pl-c1">=</span> <span class="pl-s1">useSelector_</span><span class="pl-kos">;</span></pre></div> <p dir="auto">The purpose of doing that is having your <code class="notranslate">State</code> defined every time you call <code class="notranslate">useSelector</code>. It calls the same function, only the reference is different, so it was not picked up by <code class="notranslate">why-did-you-render</code>. I imagine this pattern will become more widespread as Hooks get more popular.</p> <p dir="auto">I imagine the solution for that is the same as before — importing a mutable object instead of (immutable) ECMAScript module. However, this could evolve badly if more and more modules receive special treatment from Webpack configuration.</p> <p dir="auto">Do you think it would be possible to have an API that accepts a reference to the augmented hook?</p> <div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as hooks from "whatever"; whyDidYouRender(React, { trackAllPureComponents: true, trackExtraHooks: [hooks.useSelector], });"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-s1">hooks</span> <span class="pl-k">from</span> <span class="pl-s">"whatever"</span><span class="pl-kos">;</span> <span class="pl-en">whyDidYouRender</span><span class="pl-kos">(</span><span class="pl-smi">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">trackAllPureComponents</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">trackExtraHooks</span>: <span class="pl-kos">[</span><span class="pl-s1">hooks</span><span class="pl-kos">.</span><span class="pl-c1">useSelector</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div> <p dir="auto">ECMAScript module objects are immutable, but their constituent members are not. This could allow us to have the best of two worlds — run <code class="notranslate">whyDidYouRender</code> on custom hooks without having to alter the Webpack configuration file.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="NV7MqGNFMMXjJIZoaOq77A6QK_ALKVBYulJJv1wiVbf01nvrHh2zUYTagOiE7Iax7Qz3uemQ8aYf5Avy0j-c3w" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU5MDExNTA5Ng=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-62ced4" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">2</span> </button> <tool-tip id="tooltip-34f5cf37-d998-4f7e-8412-b5be0ef3fe6b" for="reactions--reaction_button_component-62ced4" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">0xdevalias and ansario reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="0xdevalias and ansario reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>2 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-590115096-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/590115096" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="LlfZsxJkTa/lmfpIeYmFUxcONpA+MXKRS8IQ9XYLm9GfLBJ2FJYgCijlTvmFFS9MtAiieInP/kAQBmY1HoCwgw==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/590115096/edit_form?textarea_id=issuecomment-590115096-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5MDE5NDY3NA=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5MDE5NDY3NA==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU5MDE5NDY3NA==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-590194674"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="6ce960044e3db85fa7e77e290b529b2e59c6d882cfdc026e02767b640b3f9ddc"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-590194674-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-590194674" id="issuecomment-590194674-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-02-24T07:24:02Z" class="no-wrap">Feb 24, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">it's not possible as far as i know.<br> what you can try to do is to export useSelector in a default export:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const exports = { useSelector } export default exports "><pre class="notranslate"><code class="notranslate">const exports = { useSelector } export default exports </code></pre></div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="gyGZbUbASxHiseS_FxWK4ewqRPyNbhUPVDa4vSa7AItCqS4uO5jIhYVP4j_7E7e8D7aYtW_XtPHxgPrwqKbJ4w" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU5MDE5NDY3NA=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-590194674-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/590194674" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="iFonJA/XkQlcVkDAbkOSJHnZTlDKnDDyYS3iYcr9Cr7hvFSuG7ymIa7g01Qske8GmfhDDM+vffyWFIWRfmDWxg==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/590194674/edit_form?textarea_id=issuecomment-590194674-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5NjY4MjU4Nw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5NjY4MjU4Nw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU5NjY4MjU4Nw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/nour-s/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nour-s"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/1418564?s=80&u=79d7b131a161bf52eaba8fdf4485312ab1bca4eb&v=4" width="40" height="40" alt="@nour-s" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-596682587"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="4fe92b060ca3312582c94de305cada67d3bd7fcd4d2c9ee61ffc7d92d491fdd8"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-596682587-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/nour-s/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nour-s">nour-s</a> </strong> commented <a href="#issuecomment-596682587" id="issuecomment-596682587-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-03-09T17:53:14Z" class="no-wrap">Mar 9, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDU5NjY4MjU4Nw==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">I'm using CRA, and I managed to get around it by doing:</p> <p dir="auto"><code class="notranslate">if (process.env.NODE_ENV === 'development') { whyDidYouRender(React, { trackAllPureComponents: true, trackHooks: true, trackExtraHooks: [[require('react-redux/lib'), 'useSelector']], }); }</code></p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="rcxgNYHALdwqAs4N4KNnN8eIB9wdMVAml_HxA45X135sRNd2_JiuSE38yI0MpVpqJBTblf-I8dgyR7NOAEoeFg" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU5NjY4MjU4Nw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-5efa0f" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">25</span> </button> <tool-tip id="tooltip-9a41b5bc-9f9d-41e8-b361-413d78d55154" for="reactions--reaction_button_component-5efa0f" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">alextrastero, danielacorner, mastrix, phamvutinh, saschametz, Alexander-o0o, asakasinsky, gmsorrow, disambiguator, Arelav, and 15 more reacted with thumbs up emoji</tool-tip> <button name="input[content]" id="reactions--reaction_button_component-3a7706" value="THUMBS_DOWN react" data-button-index-position="1" data-reaction-label="-1" data-reaction-content="-1" aria-pressed="false" aria-label="react with thumbs down" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="-1" fallback-src="https://github.githubassets.com/assets/1f44e-ce91733aae25.png" class="social-button-emoji">👎</g-emoji> <span class="js-discussion-reaction-group-count">7</span> </button> <tool-tip id="tooltip-46bcbf69-96ba-479f-ae94-9672df1e5e6f" for="reactions--reaction_button_component-3a7706" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">tkrotoff, reidharry, eudinnou, antontsvil, gi4no, kvarts, and gaberogan reacted with thumbs down emoji</tool-tip> <button name="input[content]" id="reactions--reaction_button_component-c482e0" value="HOORAY react" data-button-index-position="3" data-reaction-label="Hooray" data-reaction-content="tada" aria-pressed="false" aria-label="react with hooray" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="tada" fallback-src="https://github.githubassets.com/assets/1f389-36899a2cb781.png" class="social-button-emoji">🎉</g-emoji> <span class="js-discussion-reaction-group-count">6</span> </button> <tool-tip id="tooltip-4b1c7f03-9d32-4151-a8a9-ce967bd75164" for="reactions--reaction_button_component-c482e0" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">danielacorner, phamvutinh, EliseyMartynov, nickgraz, eilonmore, and u-rogel reacted with hooray emoji</tool-tip> <button name="input[content]" id="reactions--reaction_button_component-b6f7e2" value="HEART react" data-button-index-position="5" data-reaction-label="Heart" data-reaction-content="heart" aria-pressed="false" aria-label="react with heart" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="heart" fallback-src="https://github.githubassets.com/assets/2764-982dc91ea48a.png" class="social-button-emoji">❤️</g-emoji> <span class="js-discussion-reaction-group-count">17</span> </button> <tool-tip id="tooltip-9b1168f2-4042-4c87-81e3-0b9d857d268e" for="reactions--reaction_button_component-b6f7e2" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">stefanlazarevic, arthur-nesterenko, lvxiaoweiCHN, pimmee, rek, jrymer, liubhub, miroslavzeman, danielacorner, adri-blanco, and 7 more reacted with heart emoji</tool-tip> <button name="input[content]" id="reactions--reaction_button_component-221645" value="ROCKET react" data-button-index-position="6" data-reaction-label="Rocket" data-reaction-content="rocket" aria-pressed="false" aria-label="react with rocket" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="rocket" fallback-src="https://github.githubassets.com/assets/1f680-d0ef47fdb515.png" class="social-button-emoji">🚀</g-emoji> <span class="js-discussion-reaction-group-count">5</span> </button> <tool-tip id="tooltip-f304b663-1545-4cac-b0d4-0ea9ebd43b92" for="reactions--reaction_button_component-221645" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">hpachy, phamvutinh, EliseyMartynov, nickgraz, and eilonmore reacted with rocket emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="alextrastero, danielacorner, mastrix, phamvutinh, saschametz, Alexander-o0o, asakasinsky, gmsorrow, disambiguator, Arelav, and 15 more reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>25 reactions</span> </li> <li class="dropdown-item" aria-label="tkrotoff, reidharry, eudinnou, antontsvil, gi4no, kvarts, and gaberogan reacted with thumbs down emoji"> <g-emoji alias="-1" fallback-src="https://github.githubassets.com/assets/1f44e-ce91733aae25.png" class="social-button-emoji mr-2">👎</g-emoji> <span>7 reactions</span> </li> <li class="dropdown-item" aria-label="danielacorner, phamvutinh, EliseyMartynov, nickgraz, eilonmore, and u-rogel reacted with hooray emoji"> <g-emoji alias="tada" fallback-src="https://github.githubassets.com/assets/1f389-36899a2cb781.png" class="social-button-emoji mr-2">🎉</g-emoji> <span>6 reactions</span> </li> <li class="dropdown-item" aria-label="stefanlazarevic, arthur-nesterenko, lvxiaoweiCHN, pimmee, rek, jrymer, liubhub, miroslavzeman, danielacorner, adri-blanco, and 7 more reacted with heart emoji"> <g-emoji alias="heart" fallback-src="https://github.githubassets.com/assets/2764-982dc91ea48a.png" class="social-button-emoji mr-2">❤️</g-emoji> <span>17 reactions</span> </li> <li class="dropdown-item" aria-label="hpachy, phamvutinh, EliseyMartynov, nickgraz, and eilonmore reacted with rocket emoji"> <g-emoji alias="rocket" fallback-src="https://github.githubassets.com/assets/1f680-d0ef47fdb515.png" class="social-button-emoji mr-2">🚀</g-emoji> <span>5 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-596682587-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/596682587" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="KU8fPcu3awOQcOcXGKDeSh0s97ZEaYk6dQ8OuWzqmdqS0dicSy3ma+oYoXIRbJY1eCOGkmqUcbcHrmLeJlbeWQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/596682587/edit_form?textarea_id=issuecomment-596682587-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5Njk0OTc5OA=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5Njk0OTc5OA==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU5Njk0OTc5OA==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-596949798"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="7a00a6524af13105f860b181a977e994e9e6148ccd00a7d3fc68c555d88f8ad3"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-596949798-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-596949798" id="issuecomment-596949798-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-03-10T07:50:45Z" class="no-wrap">Mar 10, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDU5Njk0OTc5OA==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">but then you probably need to use <code class="notranslate">import {useSelector} from 'react-redux/lib'</code> anywhere so <code class="notranslate">useSelector</code> would be tracked, no?</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="HhqEpMrmSkjVF2mkW9Ttjiu4VAmBM_HZ0eWxgGPjDI3fkjPnt77J3LLpbyS30tDTyCSIQGOKUCd0U_PN7f7F5Q" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU5Njk0OTc5OA=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-3c7e6d" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">1</span> </button> <tool-tip id="tooltip-98df7851-e9f7-48da-86da-a6495f65473b" for="reactions--reaction_button_component-3c7e6d" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">Nantris reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="Nantris reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>1 reaction</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-596949798-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/596949798" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="m2EyyDXG7wkHUfEVmkBnpRaSekfCuZGRdHbwjYcPh2e3eFwLJEOfZ4ch3Thc/mgWJD+c850LOzTwBfraMxLx1w==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/596949798/edit_form?textarea_id=issuecomment-596949798-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5Njk1MTM4NQ=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5Njk1MTM4NQ==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU5Njk1MTM4NQ==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/nour-s/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nour-s"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/1418564?s=80&u=79d7b131a161bf52eaba8fdf4485312ab1bca4eb&v=4" width="40" height="40" alt="@nour-s" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-596951385"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="db3c44e76cadd527eba8c3555b8672fa4c64178d4c05635701c618f667e36ff7"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-596951385-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/nour-s/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nour-s">nour-s</a> </strong> commented <a href="#issuecomment-596951385" id="issuecomment-596951385-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-03-10T07:55:20Z" class="no-wrap">Mar 10, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">Interesting, actually I didn't change any of that, not sure how it worked then !</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="6BsciKuAzQj5enbnWWZbMXiXcwT0a7EJQ60_wBJ6rHopk6vL1thOnJ6EcGe1YGZsmwuvTRbSEPfmG32NnGdlEg" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU5Njk1MTM4NQ=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-596951385-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/596951385" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="/Kf5vIy5c3a+8caFW3/1qIfXURHz8WPnzpIf29Y5megvTQmSKMyYAgVgtsq+iwpKXme5uXSFTKggtXs8km0gqQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/596951385/edit_form?textarea_id=issuecomment-596951385-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5Njk1MzE5Mw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5Njk1MzE5Mw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU5Njk1MzE5Mw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-596953193"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="3e7be70de4eb7106ca05130b56c053944d337194a3c4b2cea2522e04b968e5be"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-596953193-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-596953193" id="issuecomment-596953193-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-03-10T08:00:36Z" class="no-wrap">Mar 10, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">Do you see <code class="notranslate">why did you render</code> console warnings about <code class="notranslate">useSelector</code> returning an object which equals by value and different by reference?</p> <p dir="auto">did you try:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const something = useSelector(state => ({a: state.a}))"><pre class="notranslate"><code class="notranslate">const something = useSelector(state => ({a: state.a})) </code></pre></div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="EmCMh5cY7bxxcj_zJx4eGQLBNyw6odp0000C1BAVRUzT6DvE6kBuKBaMOXPLGCNE4V3rZdgYe4p2-0CZngiMJA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU5Njk1MzE5Mw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-596953193-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/596953193" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="BDRO3ls7/WUwlQlKMxA4bIHhGo0Bw7T6C/HxV6kVv4CcRfLqzTMQrawSLZO+I8WcH5qXOxNBdmC/T+4EW8z8lQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/596953193/edit_form?textarea_id=issuecomment-596953193-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5Njk2MTc3NA=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDU5Njk2MTc3NA==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDU5Njk2MTc3NA==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-596961774"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="1b23fda542dfeb15687b1956cf91fb47ad8f38556a45a46e733275c7b45c2697"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-596961774-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-596961774" id="issuecomment-596961774-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-03-10T08:25:41Z" class="no-wrap">Mar 10, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">here is an example of how it works in practise:<br> <a href="https://codesandbox.io/s/welldone-softwarewhy-did-you-render-with-reactredux-fc8es" rel="nofollow">https://codesandbox.io/s/welldone-softwarewhy-did-you-render-with-reactredux-fc8es</a></p> <p dir="auto">notice when clicking on "same value" how there's a "why did you render" log in sandbox's console.</p> <p dir="auto">now, the sandbox uses react-redux/lib for some reason, but im not sure what's going on under the hood there...</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="ZlbmyQTs-CpmprBnE7AFNzeHr7MNE_ozYWQlbPeuzzKn3lGKebR7vgFYtuf_tjhq1Btz-u-qW83E0mchebMGWg" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDU5Njk2MTc3NA=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-2195d9" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">2</span> </button> <tool-tip id="tooltip-d55d2951-c4cd-40a8-8977-c42e0bde0b2a" for="reactions--reaction_button_component-2195d9" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">footlessbird and 0xdevalias reacted with thumbs up emoji</tool-tip> <button name="input[content]" id="reactions--reaction_button_component-845cd0" value="THUMBS_DOWN react" data-button-index-position="1" data-reaction-label="-1" data-reaction-content="-1" aria-pressed="false" aria-label="react with thumbs down" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="-1" fallback-src="https://github.githubassets.com/assets/1f44e-ce91733aae25.png" class="social-button-emoji">👎</g-emoji> <span class="js-discussion-reaction-group-count">1</span> </button> <tool-tip id="tooltip-caff559b-71a0-46e4-bd29-2af6b20a3204" for="reactions--reaction_button_component-845cd0" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">polaroidkidd reacted with thumbs down emoji</tool-tip> <button name="input[content]" id="reactions--reaction_button_component-bf42bf" value="HOORAY react" data-button-index-position="3" data-reaction-label="Hooray" data-reaction-content="tada" aria-pressed="false" aria-label="react with hooray" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="tada" fallback-src="https://github.githubassets.com/assets/1f389-36899a2cb781.png" class="social-button-emoji">🎉</g-emoji> <span class="js-discussion-reaction-group-count">1</span> </button> <tool-tip id="tooltip-081bb503-f5f2-4ce3-b7d6-20fd69194dd0" for="reactions--reaction_button_component-bf42bf" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">armspkt reacted with hooray emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="footlessbird and 0xdevalias reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>2 reactions</span> </li> <li class="dropdown-item" aria-label="polaroidkidd reacted with thumbs down emoji"> <g-emoji alias="-1" fallback-src="https://github.githubassets.com/assets/1f44e-ce91733aae25.png" class="social-button-emoji mr-2">👎</g-emoji> <span>1 reaction</span> </li> <li class="dropdown-item" aria-label="armspkt reacted with hooray emoji"> <g-emoji alias="tada" fallback-src="https://github.githubassets.com/assets/1f389-36899a2cb781.png" class="social-button-emoji mr-2">🎉</g-emoji> <span>1 reaction</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-596961774-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/596961774" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="xxqMV4shF6o0v3JLJv4YK8TPS//0NaXofJfd7lyBvtT1RsMqAYpAuS38f/xChf/t53pzCPrVFVkUj2PkKNo77A==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/596961774/edit_form?textarea_id=issuecomment-596961774-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTAyNjYwNTg2Mg=="> <div class="TimelineItem"> <div class="TimelineItem-badge"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-cross-reference"> <path d="M2.75 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 13H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 14.543V13H2.75A1.75 1.75 0 0 1 1 11.25v-7.5C1 2.784 1.784 2 2.75 2h5.5a.75.75 0 0 1 0 1.5ZM16 1.25v4.146a.25.25 0 0 1-.427.177L14.03 4.03l-3.75 3.75a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l3.75-3.75-1.543-1.543A.25.25 0 0 1 11.604 1h4.146a.25.25 0 0 1 .25.25Z"></path> </svg> </div> <div class="TimelineItem-body" > <div > This was referenced <relative-time datetime="2020-03-18T16:08:52Z" class="no-wrap">Mar 18, 2020</relative-time> </div> <div class="my-2 d-flex flex-items-start flex-column flex-md-row"> <div class="flex-auto wb-break-word" id="ref-issue-580229217" > <a href="/welldone-software/why-did-you-render/issues/95" class="Link--primary f4 text-bold markdown-title" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/95/hovercard"> Provide Support For @reduxjs/toolkit <span class="color-fg-muted text-normal" >#95</span> </a> </div> <div class="flex-shrink-0 my-1 my-md-0 ml-md-3"> <span title="Status: Closed" data-view-component="true" class="State State--merged State--small d-flex flex-items-center"> <svg aria-hidden="true" height="12" viewBox="0 0 16 16" version="1.1" width="12" data-view-component="true" class="octicon octicon-issue-closed flex-items-center mr-1"> <path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path> </svg> Closed </span> </div> </div> <div > </div> <div class="my-2 d-flex flex-items-start flex-column flex-md-row"> <div class="flex-auto wb-break-word" id="ref-issue-583805144" > <a href="/welldone-software/why-did-you-render/issues/98" class="Link--primary f4 text-bold markdown-title" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/98/hovercard"> Support for apollo/react-hooks` <span class="color-fg-muted text-normal" >#98</span> </a> </div> <div class="flex-shrink-0 my-1 my-md-0 ml-md-3"> <span title="Status: Closed" data-view-component="true" class="State State--merged State--small d-flex flex-items-center"> <svg aria-hidden="true" height="12" viewBox="0 0 16 16" version="1.1" width="12" data-view-component="true" class="octicon octicon-issue-closed flex-items-center mr-1"> <path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path> </svg> Closed </span> </div> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDYwMTM2MTE3NA=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDYwMTM2MTE3NA==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDYwMTM2MTE3NA==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/armspkt/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/armspkt"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/49720317?s=80&u=90778f01564c0d05674021990f2d439768221989&v=4" width="40" height="40" alt="@armspkt" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-601361174"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="2b9c7a4888721978ae0e0eb947860c44c3c7a66329ef5f0e2dc060c59107d3a5"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-601361174-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/armspkt/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/armspkt">armspkt</a> </strong> commented <a href="#issuecomment-601361174" id="issuecomment-601361174-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-03-19T19:02:40Z" class="no-wrap">Mar 19, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vzaidman">@vzaidman</a></p> <p dir="auto"><code class="notranslate">trackExtraHooks: [[require('react-redux/lib'), 'useSelector']],</code></p> <p dir="auto">it's work.<br> thanks.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="MIIsy2sq7LuBMA3TjpRbJ77Pw70Y9UHFb6IgBhnY29TxCpuIFnJvL-bOC1NikmZ6XVMf9PpM4DvKFGJLl8USvA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDYwMTM2MTE3NA=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-1679d0" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">4</span> </button> <tool-tip id="tooltip-46e4a52d-e555-4403-89ab-c6fca3aa5f22" for="reactions--reaction_button_component-1679d0" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">Ridermansb, OoDeLally, kevinashworth, and joshlbaker reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="Ridermansb, OoDeLally, kevinashworth, and joshlbaker reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>4 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-601361174-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/601361174" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="/qqvassTxT2lBJNnbz0CevqlpOKUuNKVPnJgFbZifUH8XyzO3BK07K4Yo7bLFsEiHvow18Ajoz9kjPYz6COzEg==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/601361174/edit_form?textarea_id=issuecomment-601361174-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDYwNTMyMjkxMg=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDYwNTMyMjkxMg==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDYwNTMyMjkxMg==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/feimosi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/feimosi"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5721520?s=80&u=980ef674cffd81476dba966be8a520287e6fe8ff&v=4" width="40" height="40" alt="@feimosi" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-605322912"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="10ddc82f6c805ef3a7a75619c7f3388fbe9d0fdf739ee4eba2ead765af558320"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-605322912-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/feimosi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/feimosi">feimosi</a> </strong> commented <a href="#issuecomment-605322912" id="issuecomment-605322912-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-03-27T21:28:48Z" class="no-wrap">Mar 27, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">I can confirm that only setting the package alias to <code class="notranslate">react-redux/dist/react-redux.js</code> fixes the issue.</p> <p dir="auto"><code class="notranslate">trackExtraHooks: [[require('react-redux/lib'), 'useSelector']]</code> <strong>doesn't work</strong>, it only silences the error but you won't get updates from <code class="notranslate">useSelector</code>.</p> <p dir="auto">For people using <code class="notranslate">rescripts</code> here's a copy&paste solution:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="[ 'use-rewire', (config, NODE_ENV) => { config.resolve.alias = { ...config.resolve.alias, 'react-redux': NODE_ENV === 'development' ? 'react-redux/dist/react-redux.js' : 'react-redux/lib', }; return config; } ]"><pre class="notranslate"><span class="pl-kos">[</span> <span class="pl-s">'use-rewire'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">,</span> <span class="pl-c1">NODE_ENV</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span><span class="pl-kos">.</span><span class="pl-c1">alias</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> ...<span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span><span class="pl-kos">.</span><span class="pl-c1">alias</span><span class="pl-kos">,</span> <span class="pl-s">'react-redux'</span>: <span class="pl-c1">NODE_ENV</span> <span class="pl-c1">===</span> <span class="pl-s">'development'</span> ? <span class="pl-s">'react-redux/dist/react-redux.js'</span> : <span class="pl-s">'react-redux/lib'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-k">return</span> <span class="pl-s1">config</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-kos">]</span></pre></div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="TtIfQOlS_C2qG1fowfK22Q4nHuOVrJlKQrvcjOPV0jiPWqgDlAp_uc3lUWgt9IuE7bvCqncVOLTnDZ7BbcgbUA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDYwNTMyMjkxMg=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-856fee" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">3</span> </button> <tool-tip id="tooltip-8b24b83e-4b16-4099-88e4-3758aa614248" for="reactions--reaction_button_component-856fee" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">Nantris, 0xdevalias, and sperreaux reacted with thumbs up emoji</tool-tip> <button name="input[content]" id="reactions--reaction_button_component-a9a99e" value="HEART react" data-button-index-position="5" data-reaction-label="Heart" data-reaction-content="heart" aria-pressed="false" aria-label="react with heart" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="heart" fallback-src="https://github.githubassets.com/assets/2764-982dc91ea48a.png" class="social-button-emoji">❤️</g-emoji> <span class="js-discussion-reaction-group-count">1</span> </button> <tool-tip id="tooltip-eea330d4-ed8e-4ace-9ecf-1e3971b8d9df" for="reactions--reaction_button_component-a9a99e" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">0xdevalias reacted with heart emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="Nantris, 0xdevalias, and sperreaux reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>3 reactions</span> </li> <li class="dropdown-item" aria-label="0xdevalias reacted with heart emoji"> <g-emoji alias="heart" fallback-src="https://github.githubassets.com/assets/2764-982dc91ea48a.png" class="social-button-emoji mr-2">❤️</g-emoji> <span>1 reaction</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-605322912-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/605322912" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="pnBOC5e/Gc1DChgLxSmjaUC4ZHhQB6BaVT5h3lT2I+tnVaS2RcYdvzQGghPF2d1XsqEIMLU21DX3rg/jBXYemg==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/605322912/edit_form?textarea_id=issuecomment-605322912-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTAyNzY3OTI2MA=="> <div class="TimelineItem"> <div class="TimelineItem-badge"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-cross-reference"> <path d="M2.75 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 13H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 14.543V13H2.75A1.75 1.75 0 0 1 1 11.25v-7.5C1 2.784 1.784 2 2.75 2h5.5a.75.75 0 0 1 0 1.5ZM16 1.25v4.146a.25.25 0 0 1-.427.177L14.03 4.03l-3.75 3.75a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l3.75-3.75-1.543-1.543A.25.25 0 0 1 11.604 1h4.146a.25.25 0 0 1 .25.25Z"></path> </svg> </div> <div class="TimelineItem-body" > <div > <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=40&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="20" height="20" alt="@vzaidman" /></a> <a class="author Link--primary text-bold" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> mentioned this issue <a class="Link--secondary" href="#ref-issue-578245932" > <relative-time datetime="2020-03-28T17:54:36Z" class="no-wrap">Mar 28, 2020</relative-time> </a> </div> <div class="mt-2 d-flex flex-items-start flex-column flex-md-row"> <div class="flex-auto wb-break-word" id="ref-issue-578245932" > <a href="/welldone-software/why-did-you-render/issues/92" class="Link--primary f4 text-bold markdown-title" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/92/hovercard"> TypeError: Attempted to assign to readonly property <span class="color-fg-muted text-normal" >#92</span> </a> </div> <div class="flex-shrink-0 my-1 my-md-0 ml-md-3"> <span title="Status: Closed" data-view-component="true" class="State State--merged State--small d-flex flex-items-center"> <svg aria-hidden="true" height="12" viewBox="0 0 16 16" version="1.1" width="12" data-view-component="true" class="octicon octicon-issue-closed flex-items-center mr-1"> <path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path> </svg> Closed </span> </div> </div> </div> </div> </div> <div id="js-progressive-timeline-item-container"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="ajax-pagination-form js-ajax-pagination pagination-loader-container mt-4 mb-4 ml-0 text-center" data-turbo="false" action="/welldone-software/why-did-you-render/issues/85/partials/load_more?after_cursor=Y3Vyc29yOnYyOpPPAAABcSJH_2ACqjEwMjc2NzkyNjA%3D&before_cursor=Y3Vyc29yOnYyOpPPAAABdK3B9mAAqTY5NTg0NzU1Ng%3D%3D" accept-charset="UTF-8" method="get"> <div class="discussion-item-header pt-0"> <div class="Box d-inline-flex flex-column"> <button type="submit" class="color-fg-muted ajax-pagination-btn no-underline pb-0 pt-2 px-4 mt-0 mb-1 color-bg-default border-0"> 19 hidden items </button> <button type="submit" class="ajax-pagination-btn no-underline pb-1 pt-0 px-4 mt-0 mb-1 color-bg-default border-0" data-disable-with="Loading…"> Load more… </button> </div> </div> </div> </form> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDY5NTg0NzU1Ng=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDY5NTg0NzU1Ng==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDY5NTg0NzU1Ng==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/Nantris/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Nantris"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/6835891?s=80&u=b310395ee4606daf26f1924b67b9cbf418af44e3&v=4" width="40" height="40" alt="@Nantris" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-695847556"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="ee02ee40dcac3800e1c245eb482670f6c8ec4be939a9ba9a64ebf486998d80d5"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-695847556-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/Nantris/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Nantris">Nantris</a> </strong> commented <a href="#issuecomment-695847556" id="issuecomment-695847556-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-09-20T23:03:24Z" class="no-wrap">Sep 20, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDY5NTg0NzU1Ng==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto"><del>I thought the workaround was simple enough, but unfortunately it doesn't work for us. It makes at least one of our dependencies throw errors about not being able to find the Redux store and how we need to wrap our app in <code class="notranslate"><Provider></code> from react-redux. We used the Webpack resolve method <a href="https://github.com/welldone-software/why-did-you-render/issues/85#issuecomment-612622811" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/85/hovercard">described above</a>.</del></p> <p dir="auto">I did eventually get it working after some Webpack configuration changes. Unfortunately I'm not sure what change made the difference.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="mv8zbdclXEPSllLi73MmLZjgycKx6399xiUFnnQzxr1bd4Quqn3f17VoVGIDdRtwe3wVi1NS3oNjk0fT-i4P1Q" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDY5NTg0NzU1Ng=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-695847556-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/695847556" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="Bg0ithbKuBW+9Gq0SPRZGo1zx90C6VuHqrGyopTbBmNRH4py7DMa4j8u9VJxaO5Kln9UUDIPb+oBE4kSyZJJgQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/695847556/edit_form?textarea_id=issuecomment-695847556-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDY5NTkyMDEzOA=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDY5NTkyMDEzOA==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDY5NTkyMDEzOA==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-695920138"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="e414c338364ba9fee07f658aca132d196a62b497f3af2e1c0c4cf5651178b297"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-695920138-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-695920138" id="issuecomment-695920138-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-09-21T06:12:21Z" class="no-wrap">Sep 21, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">More info is required to help with it.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="yS74w1ee5CMYLi_z6TV9B9wJlxIja3vuhXKaZWOoHFMIpk-AKsZnt3_QKXMFM0BaP5VLW8HS2hAgxNgo7bXVOw" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDY5NTkyMDEzOA=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-695920138-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/695920138" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="He9+cdn+Du2fv3Rx0QipYasuGYvk35fBZ4GrZJc8b5uDsoneXbCoRZAZncMxOEsX5NNFUWyKq6JIDYkfriBVHw==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/695920138/edit_form?textarea_id=issuecomment-695920138-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDcwNDgwMTE3OA=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDcwNDgwMTE3OA==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDcwNDgwMTE3OA==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/AdrienLemaire/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/AdrienLemaire"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/260983?s=80&u=5c93d17fe4deca069d873bec4535cfe28d748c3c&v=4" width="40" height="40" alt="@AdrienLemaire" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-704801178"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="d200031eb1c4de3d9bf7dd0427ae017d9c220d7f68fe81900d7c5c2f2b97947d"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-704801178-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/AdrienLemaire/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/AdrienLemaire">AdrienLemaire</a> </strong> commented <a href="#issuecomment-704801178" id="issuecomment-704801178-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-10-07T09:08:00Z" class="no-wrap">Oct 7, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <blockquote> <p dir="auto">We have a workaround for <code class="notranslate">react-redux</code>, but what about other popular libraries like <code class="notranslate">react-router-dom</code> and <code class="notranslate">@material-ui/core</code>? This workaround will only work for <code class="notranslate">react-redux</code>.</p> </blockquote> <p dir="auto">It doesn't seem possible to track react-router hooks on their dev & dev-experimental branches. I created an issue: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="716311272" data-permission-text="Title is private" data-url="https://github.com/remix-run/react-router/issues/7646" data-hovercard-type="issue" data-hovercard-url="/remix-run/react-router/issues/7646/hovercard" href="https://github.com/remix-run/react-router/issues/7646">remix-run/react-router#7646</a></p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="vveAXGiUNXam-6NuDbq-D04xXIveIA85csHXp9yovhJ_fzcfFcy24sEFpe7hvINSra2AwjyZrsfXd5XqUrV3eg" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDcwNDgwMTE3OA=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-6cab5a" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">2</span> </button> <tool-tip id="tooltip-e8e0749c-d090-44a4-9a59-565b544aa6ab" for="reactions--reaction_button_component-6cab5a" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">Nantris and 0xdevalias reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="Nantris and 0xdevalias reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>2 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-704801178-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/704801178" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="sn4SiS2zwZn6asuiJWT7ssZ2v5DCbIh16SlEdLz7tFPQQM2w2nL0ahRhDtsmSzENMLm4euwjz5+iI1kCVPazMw==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/704801178/edit_form?textarea_id=issuecomment-704801178-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDcwNTMwMDM4OA=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDcwNTMwMDM4OA==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDcwNTMwMDM4OA==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/AdrienLemaire/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/AdrienLemaire"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/260983?s=80&u=5c93d17fe4deca069d873bec4535cfe28d748c3c&v=4" width="40" height="40" alt="@AdrienLemaire" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-705300388"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="74db641133cd8af2bc2ecb340dabfda32f80a599bdcc943ff46152d8fe0bfa06"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-705300388-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/AdrienLemaire/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/AdrienLemaire">AdrienLemaire</a> </strong> commented <a href="#issuecomment-705300388" id="issuecomment-705300388-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-10-08T02:59:15Z" class="no-wrap">Oct 8, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDcwNTMwMDM4OA==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">So I got a reply from <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/timdorr/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/timdorr">@timdorr</a> who basically said that it should work with <code class="notranslate">[require("react-router-dom/main"), "useLocation"]</code>.</p> <p dir="auto">The <code class="notranslate">main.js</code> checks the NODE_ENV and imports the correct commonjs file from their <code class="notranslate">umd/</code> directory.</p> <p dir="auto">But it still doesn't work.</p> <div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from "react"; if (process.env.NODE_ENV === "development") { const whyDidYouRender = require("@welldone-software/why-did-you-render"); whyDidYouRender(React, { trackAllPureComponents: true, // useState, useEffect ... trackExtraHooks: [ [require("@apollo/client/react/hooks/hooks.cjs"), "useReactiveVar"], [require("react-i18next/dist/commonjs/useTranslation"), "useTranslation"], [require("react-router-dom/main"), "useLocation"], // <= Cannot set property useLocation of #<Object> which has only a getter });"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">===</span> <span class="pl-s">"development"</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">const</span> <span class="pl-s1">whyDidYouRender</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"@welldone-software/why-did-you-render"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-en">whyDidYouRender</span><span class="pl-kos">(</span><span class="pl-smi">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">trackAllPureComponents</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c">// useState, useEffect ...</span> <span class="pl-c1">trackExtraHooks</span>: <span class="pl-kos">[</span> <span class="pl-kos">[</span><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"@apollo/client/react/hooks/hooks.cjs"</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">"useReactiveVar"</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-i18next/dist/commonjs/useTranslation"</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">"useTranslation"</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-router-dom/main"</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">"useLocation"</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c">// <= Cannot set property useLocation of #<Object> which has only a getter</span><span class="pl-kos"></span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span><span class="pl-kos"></span></pre></div> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/7c283f491afa6e842091e22d24a55d3f1f40720072b4a562e534d660f1913eb9/68747470733a2f2f692e696d6775722e636f6d2f7a59324e575a722e706e67"><img src="https://camo.githubusercontent.com/7c283f491afa6e842091e22d24a55d3f1f40720072b4a562e534d660f1913eb9/68747470733a2f2f692e696d6775722e636f6d2f7a59324e575a722e706e67" alt="" data-canonical-src="https://i.imgur.com/zY2NWZr.png" style="max-width: 100%;"></a></p> <p dir="auto">When I try to debug that, I can confirm that <code class="notranslate">require("react-router-dom/main").useLocation</code> exists.</p> <div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (process.env.NODE_ENV === "development") { const reactRouterDom = require("react-router-dom/main"); console.log(reactRouterDom.useLocation); const whyDidYouRender = require("@welldone-software/why-did-you-render"); whyDidYouRender(React, { trackExtraHooks: [ [reactRouterDom, "useLocation"], ], });"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">===</span> <span class="pl-s">"development"</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">const</span> <span class="pl-s1">reactRouterDom</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"react-router-dom/main"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">reactRouterDom</span><span class="pl-kos">.</span><span class="pl-c1">useLocation</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-s1">whyDidYouRender</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"@welldone-software/why-did-you-render"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-en">whyDidYouRender</span><span class="pl-kos">(</span><span class="pl-smi">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">trackExtraHooks</span>: <span class="pl-kos">[</span> <span class="pl-kos">[</span><span class="pl-s1">reactRouterDom</span><span class="pl-kos">,</span> <span class="pl-s">"useLocation"</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span><span class="pl-kos"></span></pre></div> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/63e2b7049adaa6afb3d5a4338259b158e4858eac414a64289162248128f92125/68747470733a2f2f692e696d6775722e636f6d2f79574b4e4642762e706e67"><img src="https://camo.githubusercontent.com/63e2b7049adaa6afb3d5a4338259b158e4858eac414a64289162248128f92125/68747470733a2f2f692e696d6775722e636f6d2f79574b4e4642762e706e67" alt="" data-canonical-src="https://i.imgur.com/yWKNFBv.png" style="max-width: 100%;"></a></p> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vzaidman">@vzaidman</a> any idea how to solve this ?</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="jBfvMu3dLe8nvFlnbuu0xM_z--rK2XpqTv4dl2Dq7NZNn1hxkIWue0BCX-eC7YmZLG8noyhg25TrSF_a7vclvg" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDcwNTMwMDM4OA=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-705300388-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/705300388" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="Ui0uKROdUKMPNB6ztsgaV2CT5eTIacbEUB3yL+XJ//UGrQZ52Oof9J7F99NmrtBgIKgp8DPuNCEGdW+tlyo6Ew==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/705300388/edit_form?textarea_id=issuecomment-705300388-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDcwNTM0Nzk0Mw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDcwNTM0Nzk0Mw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDcwNTM0Nzk0Mw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-705347943"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="ad1fbc2c77dcb88b770a8293753145f848af9c2b7bc4e6897541ff7e1b2141e7"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-705347943-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-705347943" id="issuecomment-705347943-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-10-08T05:57:02Z" class="no-wrap">Oct 8, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">maybe <code class="notranslate">react-router-dom/cjs</code>.</p> <p dir="auto">but i wouldn't track "useLocation".</p> <p dir="auto">it sounds like a waste of time to me to be honest.</p> <p dir="auto">also, the way you import it here, should be the same way you import it everywhere in the project, so make sure to use "alias" or something.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="0MDeXZ5xy8Jzb_dgbP6LgicreI60seD7CPHpM8dTBZURSGke4ylIVhSR8eCA-LbfxLekx1YIQQWtR6t-SU7M_Q" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDcwNTM0Nzk0Mw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-9daea3" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">2</span> </button> <tool-tip id="tooltip-d0b4cfd3-ba7d-46a1-bce4-c1f52a29c158" for="reactions--reaction_button_component-9daea3" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">Nantris and 0xdevalias reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="Nantris and 0xdevalias reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>2 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-705347943-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/705347943" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="9wh5Y5KO8irrepdhmlj3siynyn3994jm6DCCRWgbirB+7kChwnWtbzbqb6SeW6PlBeQ50zUabH5aJBKH/MjP/w==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/705347943/edit_form?textarea_id=issuecomment-705347943-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA1NzU0NTk5Mw=="> <div class="TimelineItem"> <div class="TimelineItem-badge"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-cross-reference"> <path d="M2.75 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 13H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 14.543V13H2.75A1.75 1.75 0 0 1 1 11.25v-7.5C1 2.784 1.784 2 2.75 2h5.5a.75.75 0 0 1 0 1.5ZM16 1.25v4.146a.25.25 0 0 1-.427.177L14.03 4.03l-3.75 3.75a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l3.75-3.75-1.543-1.543A.25.25 0 0 1 11.604 1h4.146a.25.25 0 0 1 .25.25Z"></path> </svg> </div> <div class="TimelineItem-body" > <div > <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=40&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="20" height="20" alt="@vzaidman" /></a> <a class="author Link--primary text-bold" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> mentioned this issue <a class="Link--secondary" href="#ref-issue-733787236" > <relative-time datetime="2020-11-23T21:24:20Z" class="no-wrap">Nov 23, 2020</relative-time> </a> </div> <div class="mt-2 d-flex flex-items-start flex-column flex-md-row"> <div class="flex-auto wb-break-word" id="ref-issue-733787236" > <a href="/welldone-software/why-did-you-render/issues/154" class="Link--primary f4 text-bold markdown-title" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/154/hovercard"> Support create-react-app/react-scripts 4 <span class="color-fg-muted text-normal" >#154</span> </a> </div> <div class="flex-shrink-0 my-1 my-md-0 ml-md-3"> <span title="Status: Open" data-view-component="true" class="State State--open State--small d-flex flex-items-center"> <svg aria-hidden="true" height="12" viewBox="0 0 16 16" version="1.1" width="12" data-view-component="true" class="octicon octicon-issue-opened flex-items-center mr-1"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> Open </span> </div> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDc0MjU4NjQ2OQ=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDc0MjU4NjQ2OQ==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDc0MjU4NjQ2OQ==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/DaleyKD/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/DaleyKD"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/7206282?s=80&u=45d4a35f4a8a7c8e260c4f85bc4c60bd9b295822&v=4" width="40" height="40" alt="@DaleyKD" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-742586469"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="934debfdcccc604c4917ef9d33e77aa9da629cb414211b7b99e6a1d0a30c126f"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-742586469-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/DaleyKD/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/DaleyKD">DaleyKD</a> </strong> commented <a href="#issuecomment-742586469" id="issuecomment-742586469-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-12-10T15:19:38Z" class="no-wrap">Dec 10, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDc0MjU4NjQ2OQ==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">I tried doing this with <code class="notranslate">msteams-react-base-component</code> (v3.0.0), which has a cjs/esm directory. I had no luck and had to move on, which is a bummer because something is causing a 6x render.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="vsQcvCsAP04RQjNrQtoumvXyrdls5BCR7R8FV3TpNnl_TKv_Vli82na8Neuu3BPHFm5xkI5dsW9IqUca-vT_EQ" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDc0MjU4NjQ2OQ=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-577337" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">1</span> </button> <tool-tip id="tooltip-83b6e846-75b9-4874-a5f2-0af5f98d43c3" for="reactions--reaction_button_component-577337" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">mastrzyz reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="mastrzyz reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>1 reaction</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-742586469-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/742586469" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="gZNDOUxvOwLtLsy2NXbNlJklu/2NhSOWZbcFK2S6KV1nz0F6IeBOaP2MwVfXE7VP8PX/BlojeKy1umXENV6o3w==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/742586469/edit_form?textarea_id=issuecomment-742586469-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA4MDM4NDgzNw=="> <div class="TimelineItem"> <div class="TimelineItem-badge"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-cross-reference"> <path d="M2.75 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 13H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 14.543V13H2.75A1.75 1.75 0 0 1 1 11.25v-7.5C1 2.784 1.784 2 2.75 2h5.5a.75.75 0 0 1 0 1.5ZM16 1.25v4.146a.25.25 0 0 1-.427.177L14.03 4.03l-3.75 3.75a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l3.75-3.75-1.543-1.543A.25.25 0 0 1 11.604 1h4.146a.25.25 0 0 1 .25.25Z"></path> </svg> </div> <div class="TimelineItem-body" > <div > <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mastrzyz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mastrzyz"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/37447884?s=40&u=88b34b4dfc7c11397444dd172c834cd73cfb2f62&v=4" width="20" height="20" alt="@mastrzyz" /></a> <a class="author Link--primary text-bold" data-hovercard-type="user" data-hovercard-url="/users/mastrzyz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mastrzyz">mastrzyz</a> mentioned this issue <a class="Link--secondary" href="#ref-issue-781025939" > <relative-time datetime="2021-01-07T15:36:26Z" class="no-wrap">Jan 7, 2021</relative-time> </a> </div> <div class="mt-2 d-flex flex-items-start flex-column flex-md-row"> <div class="flex-auto wb-break-word" id="ref-issue-781025939" > <a href="/welldone-software/why-did-you-render/issues/173" class="Link--primary f4 text-bold markdown-title" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/173/hovercard"> Problem with TS4.1 + WP5 "Cannot set property createElement of [object Module] which has only a getter" <span class="color-fg-muted text-normal" >#173</span> </a> </div> <div class="flex-shrink-0 my-1 my-md-0 ml-md-3"> <span title="Status: Closed" data-view-component="true" class="State State--merged State--small d-flex flex-items-center"> <svg aria-hidden="true" height="12" viewBox="0 0 16 16" version="1.1" width="12" data-view-component="true" class="octicon octicon-issue-closed flex-items-center mr-1"> <path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path> </svg> Closed </span> </div> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDc1NjE5MTU2Mw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDc1NjE5MTU2Mw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDc1NjE5MTU2Mw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mastrzyz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mastrzyz"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/37447884?s=80&u=88b34b4dfc7c11397444dd172c834cd73cfb2f62&v=4" width="40" height="40" alt="@mastrzyz" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-756191563"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="fe851d293b380f97da19f8cefdb7f94aa7c7c3d158ffb23274c316371240b559"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-756191563-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/mastrzyz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mastrzyz">mastrzyz</a> </strong> commented <a href="#issuecomment-756191563" id="issuecomment-756191563-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-01-07T15:37:01Z" class="no-wrap">Jan 7, 2021</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">Reproduces for us when we tried to upgrade from Webpack4 to Webpack5 while on TS 4.1 and ES6.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="27eH3A4i1GHUuFTUqKtPgyu8rgmNLw61H6_fR3t9-0kaPzCfc3pX9bNGUlRErXLeyCByQG-Wr0u6GZ0K9WAyIQ" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDc1NjE5MTU2Mw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-84afed" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">1</span> </button> <tool-tip id="tooltip-c7122944-3277-4d50-8862-0faa8f9958ab" for="reactions--reaction_button_component-84afed" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">Nantris reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="Nantris reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>1 reaction</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-756191563-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/756191563" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="QMrhA6LXQMwPzHrsNSAag8DHMWnTGmRGP3N45Hzj8TGL9eWREburRxJok7xkRLxL/0c3wWrJ2GGcnTgH6TeRTQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/756191563/edit_form?textarea_id=issuecomment-756191563-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA4MzIzNTM4Ng=="> <div class="TimelineItem"> <div class="TimelineItem-badge"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-cross-reference"> <path d="M2.75 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 13H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 14.543V13H2.75A1.75 1.75 0 0 1 1 11.25v-7.5C1 2.784 1.784 2 2.75 2h5.5a.75.75 0 0 1 0 1.5ZM16 1.25v4.146a.25.25 0 0 1-.427.177L14.03 4.03l-3.75 3.75a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l3.75-3.75-1.543-1.543A.25.25 0 0 1 11.604 1h4.146a.25.25 0 0 1 .25.25Z"></path> </svg> </div> <div class="TimelineItem-body" > <div > <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=40&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="20" height="20" alt="@vzaidman" /></a> <a class="author Link--primary text-bold" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> mentioned this issue <a class="Link--secondary" href="#ref-issue-788904282" > <relative-time datetime="2021-01-19T12:18:51Z" class="no-wrap">Jan 19, 2021</relative-time> </a> </div> <div class="mt-2 d-flex flex-items-start flex-column flex-md-row"> <div class="flex-auto wb-break-word" id="ref-issue-788904282" > <a href="/welldone-software/why-did-you-render/issues/176" class="Link--primary f4 text-bold markdown-title" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/176/hovercard"> Crash after migrating webpack 4 -> 5 with new JSX transforms <span class="color-fg-muted text-normal" >#176</span> </a> </div> <div class="flex-shrink-0 my-1 my-md-0 ml-md-3"> <span title="Status: Closed" data-view-component="true" class="State State--merged State--small d-flex flex-items-center"> <svg aria-hidden="true" height="12" viewBox="0 0 16 16" version="1.1" width="12" data-view-component="true" class="octicon octicon-issue-closed flex-items-center mr-1"> <path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path> </svg> Closed </span> </div> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDgyMTM2NzAwOA=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDgyMTM2NzAwOA==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDgyMTM2NzAwOA==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/jmtimko5/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/jmtimko5"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/6867087?s=80&u=f951599a06f22b2baff5e49c90d09d754f376787&v=4" width="40" height="40" alt="@jmtimko5" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-821367008"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="419f6089877ea2685801c326f1f84f591a8fea1d0a364f313b46ef1d5ee7b6a1"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-821367008-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/jmtimko5/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/jmtimko5">jmtimko5</a> </strong> commented <a href="#issuecomment-821367008" id="issuecomment-821367008-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-04-16T18:01:39Z" class="no-wrap">Apr 16, 2021</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">Has anybody gotten this to work with <code class="notranslate">@apollo/react-hooks</code>? Attempted the approach here <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="557953449" data-permission-text="Title is private" data-url="https://github.com/welldone-software/why-did-you-render/issues/85" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/85/hovercard?comment_id=612620664&comment_type=issue_comment" href="https://github.com/welldone-software/why-did-you-render/issues/85#issuecomment-612620664">#85 (comment)</a> and all the variations of importing with no luck.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="a-Oq98z5Ff0cPbwmJHxdALrixe58qAgGPeIzCEJpQWWqax20saGWaXvDuqbIemBdWX4Zp54RqfiYVHFFzHSIDQ" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDgyMTM2NzAwOA=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-93b724" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">2</span> </button> <tool-tip id="tooltip-58b85e60-b57a-4943-b95a-6670a3598367" for="reactions--reaction_button_component-93b724" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">pwalker and mgasner reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="pwalker and mgasner reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>2 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-821367008-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/821367008" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="dwpIplXdmlYDlXGinDj5uVDEhYWGv0rrBwdTWGJxtESLMHzdVsM/oCxylZo8qYoRb3W9SiyqdZCSAJIBnpczQg==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/821367008/edit_form?textarea_id=issuecomment-821367008-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjExNTM2NQ=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjExNTM2NQ==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDgzMjExNTM2NQ==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/nikitaNaredi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nikitaNaredi"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/40458363?s=80&v=4" width="40" height="40" alt="@nikitaNaredi" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-832115365"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="b4c27c5036320adfbb8b098c6a15a555cd02481460d927ceaf52df2c860133c1"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-832115365-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/nikitaNaredi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nikitaNaredi">nikitaNaredi</a> </strong> commented <a href="#issuecomment-832115365" id="issuecomment-832115365-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-05-04T17:30:22Z" class="no-wrap">May 4, 2021</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <blockquote> <p dir="auto">I can confirm that only setting the package alias to <code class="notranslate">react-redux/dist/react-redux.js</code> fixes the issue.</p> <p dir="auto"><code class="notranslate">trackExtraHooks: [[require('react-redux/lib'), 'useSelector']]</code> <strong>doesn't work</strong>, it only silences the error but you won't get updates from <code class="notranslate">useSelector</code>.</p> <p dir="auto">For people using <code class="notranslate">rescripts</code> here's a copy&paste solution:</p> <div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="[ 'use-rewire', (config, NODE_ENV) => { config.resolve.alias = { ...config.resolve.alias, 'react-redux': NODE_ENV === 'development' ? 'react-redux/dist/react-redux.js' : 'react-redux/lib', }; return config; } ]"><pre class="notranslate"><span class="pl-kos">[</span> <span class="pl-s">'use-rewire'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">,</span> <span class="pl-c1">NODE_ENV</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span><span class="pl-kos">.</span><span class="pl-c1">alias</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> ...<span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">resolve</span><span class="pl-kos">.</span><span class="pl-c1">alias</span><span class="pl-kos">,</span> <span class="pl-s">'react-redux'</span>: <span class="pl-c1">NODE_ENV</span> <span class="pl-c1">===</span> <span class="pl-s">'development'</span> ? <span class="pl-s">'react-redux/dist/react-redux.js'</span> : <span class="pl-s">'react-redux/lib'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-k">return</span> <span class="pl-s1">config</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-kos">]</span></pre></div> </blockquote> <p dir="auto">Hey am using CRA, where I should add this <code class="notranslate">react-redux/dist/react-redux.js</code>. Can you specify the folder path and where and how exactly this needs to be added.</p> <p dir="auto">wdyr.js:<br> <code class="notranslate">if (process.env.NODE_ENV === "development") { const whyDidYouRender = require("@welldone-software/why-did-you-render"); whyDidYouRender(React, { trackAllPureComponents: true, trackHooks: true, trackExtraHooks: [[require("react-redux/lib"), "useSelector"]], }); }</code></p> <p dir="auto">It will be very kindfull if you guide me.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="zUZaWkipH6HqhI68Gq1Q8FfXwQgA0GIsZSMLSpRIzKoMzu0ZNfGcNY16iDz2q22ttEsdQeJpw9LAlUkHGlUFwg" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDgzMjExNTM2NQ=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-832115365-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/832115365" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="Rj4KWMmXyhzOQ6PShMeWU+mw8nLEuXJBP0lLtEnp8V8VIKjx943YfOM6iz2vu0pQuc5UwotMa0a/VDyLTeAAKA==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/832115365/edit_form?textarea_id=issuecomment-832115365-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjE2MTYxMg=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjE2MTYxMg==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDgzMjE2MTYxMg==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-832161612"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="b8156d47259db1d753452cb3de57506644057ba8a9b5a6c045638fdd6d92c45a"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-832161612-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-832161612" id="issuecomment-832161612-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-05-04T18:43:36Z" class="no-wrap">May 4, 2021</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <blockquote> <p dir="auto">It will be very kindfull if you guide me.</p> </blockquote> <p dir="auto">please look at this comment:<br> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="733787236" data-permission-text="Title is private" data-url="https://github.com/welldone-software/why-did-you-render/issues/154" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/154/hovercard?comment_id=773905769&comment_type=issue_comment" href="https://github.com/welldone-software/why-did-you-render/issues/154#issuecomment-773905769">#154 (comment)</a></p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="acZX_XWTzvxzj8oJhzmhnQ68iz463j8QNpRsJsU-WfCoTuC-CMtNaBRxzIlrP5zA7SBXd9hnnu6TIi5rSyOQmA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDgzMjE2MTYxMg=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-8f84d3" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">1</span> </button> <tool-tip id="tooltip-40757007-791d-4728-93af-7a5067dd52f4" for="reactions--reaction_button_component-8f84d3" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">Nantris reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="Nantris reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>1 reaction</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-832161612-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/832161612" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="i8+AKUzmTki5eGPqnOdYLnBvQkUN3b0WQB6UpGemBqPc2fbMzO7Lt+HiirvAZxEDhRQa2+Qt1xr8c2ux191CoA==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/832161612/edit_form?textarea_id=issuecomment-832161612-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjQzOTA3MQ=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjQzOTA3MQ==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDgzMjQzOTA3MQ==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/nikitaNaredi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nikitaNaredi"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/40458363?s=80&v=4" width="40" height="40" alt="@nikitaNaredi" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-832439071"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="864eb38305af49c7583d7ddc6a9eb30e9bff4682c6b846129980ae01c5456185"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-832439071-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/nikitaNaredi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nikitaNaredi">nikitaNaredi</a> </strong> commented <a href="#issuecomment-832439071" id="issuecomment-832439071-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-05-05T06:13:50Z" class="no-wrap">May 5, 2021</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDgzMjQzOTA3MQ==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <blockquote> <blockquote> <p dir="auto">It will be very kindfull if you guide me.</p> </blockquote> <p dir="auto">please look at this comment:<br> <a href="https://github.com/welldone-software/why-did-you-render/issues/154#issuecomment-773905769" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/154/hovercard">#154 (comment)</a></p> </blockquote> <p dir="auto">I have already followed this <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="733787236" data-permission-text="Title is private" data-url="https://github.com/welldone-software/why-did-you-render/issues/154" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/154/hovercard" href="https://github.com/welldone-software/why-did-you-render/issues/154">#154</a> But I need to track useSelector. For that I tried<br> <code class="notranslate">if (process.env.NODE_ENV === "development") { const whyDidYouRender = require("@welldone-software/why-did-you-render"); const ReactRedux = require("react-redux"); whyDidYouRender(React, { trackAllPureComponents: true, trackExtraHooks: [[ReactRedux, "useSelector"]], }); }</code><br> But this gave me <code class="notranslate">trackExtraHooks cannot set property of #<Object> which has only a getter</code></p> <p dir="auto">Then I follwed this issue and updated wdyr.js according to above mentioned solutions:<br> <code class="notranslate">if (process.env.NODE_ENV === "development") { const whyDidYouRender = require("@welldone-software/why-did-you-render"); whyDidYouRender(React, { trackAllPureComponents: true, trackHooks: true, trackExtraHooks: [[require("react-redux/lib"), "useSelector"]], }); }</code><br> This also didn't give any logs.</p> <p dir="auto">Then I read this <a href="url">https://github.com/welldone-software/why-did-you-render/issues/85#issuecomment-605322912</a><br> And asking where and to add this <code class="notranslate">react-redux/dist/react-redux.js</code>. My react versions are:<br> <code class="notranslate">"react": "^17.0.1", "react-dom": "^17.0.1", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "react-scripts": "4.0.0",</code></p> <p dir="auto">If you have any other solutions let me know. Am struggling around it from 4-5 days.<br> Thanks</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="gyKdIWwEU_J0RTTNhZkFk6ULfEOZ0z6RrvXXbxr0FCpCqipiEVzQZhO7Mk1pnzjORpegCntqn28LQ5UilOndQg" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDgzMjQzOTA3MQ=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-832439071-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/832439071" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="gBgG2mPwlzx3ySPJ/fmal0y9tIMadB4lbL+Rk4vsiPhJdnM6ulRp2Ll5NBV/I5eNn8PTwjYh8hRZhij07shYjg==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/832439071/edit_form?textarea_id=issuecomment-832439071-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjQ0MDQyNw=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjQ0MDQyNw==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDgzMjQ0MDQyNw==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-832440427"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="00f5bd6a4fde139300ca2f4ea744cbf7c3c064aad159f81df49c850076fc44eb"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-832440427-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-832440427" id="issuecomment-832440427-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-05-05T06:17:07Z" class="no-wrap">May 5, 2021</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDgzMjQ0MDQyNw==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/nikitaNaredi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/nikitaNaredi">@nikitaNaredi</a> please use ``` for code blocks so it will be more readable. for example:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if (process.env.NODE_ENV === "development") { const whyDidYouRender = require("@welldone-software/why-did-you-render"); const ReactRedux = require("react-redux"); whyDidYouRender(React, { trackAllPureComponents: true, trackExtraHooks: [[ReactRedux, "useSelector"]], }); }"><pre class="notranslate"><code class="notranslate">if (process.env.NODE_ENV === "development") { const whyDidYouRender = require("@welldone-software/why-did-you-render"); const ReactRedux = require("react-redux"); whyDidYouRender(React, { trackAllPureComponents: true, trackExtraHooks: [[ReactRedux, "useSelector"]], }); } </code></pre></div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="_RoOhem8Bjn2g6RtLd7VemsU0i0TpDUGiEYy-OW9P5k8krnGlOSFrZF9ou3B2OgniIgOZPEdlPgt8HC1a6D28Q" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDgzMjQ0MDQyNw=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-5fb2e4" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">2</span> </button> <tool-tip id="tooltip-142869e7-c5ad-4e70-b7dd-311a1e8224fd" for="reactions--reaction_button_component-5fb2e4" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">nikitaNaredi and Nantris reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="nikitaNaredi and Nantris reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>2 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-832440427-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/832440427" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="WvfuiInkR/jEoAmibqFEm8BEbwyBFy6Ta2b9QEAZGzwCqc/029XSgomKy/Y0QvHS+UO1dGX6PRtXCQsRgbs1eA==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/832440427/edit_form?textarea_id=issuecomment-832440427-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjQ0NTExOQ=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjQ0NTExOQ==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDgzMjQ0NTExOQ==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=80&u=738baeb42b1f92ddd187b10fc834f89a1e8149d2&v=4" width="40" height="40" alt="@vzaidman" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-832445119"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="43236e749357709022c5e02c934b59e1d0831a584ec37bf93b71241697f4effb"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-832445119-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has been invited to collaborate on the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Collaborator</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman">vzaidman</a> </strong> commented <a href="#issuecomment-832445119" id="issuecomment-832445119-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-05-05T06:27:48Z" class="no-wrap">May 5, 2021</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDgzMjQ0NTExOQ==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <ol dir="auto"> <li>install craco: <a href="https://github.com/gsoft-inc/craco">https://github.com/gsoft-inc/craco</a></li> <li>what we need to do is to ensure anybody who imports <code class="notranslate">react-redux</code> imports it as <code class="notranslate">react-redux/lib</code> because it's exports are of the cjs type, we can manipulate these exports. I've updated the bottom part of <span class="reference"><svg class="octicon octicon-issue-opened open mr-1" title="Open" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="733787236" data-permission-text="Title is private" data-url="https://github.com/welldone-software/why-did-you-render/issues/154" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/154/hovercard?comment_id=773905769&comment_type=issue_comment" href="https://github.com/welldone-software/why-did-you-render/issues/154#issuecomment-773905769">Support create-react-app/react-scripts 4<span class="issue-shorthand"> #154 (comment)</span></a></span> to show how to add <code class="notranslate">react-redux</code> alias.</li> </ol> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="X-gAqlhYxmCRQ1NcsEjfPqfGfvzCHOoYSVLI_UvloRyeYLfpJQBF9Pa9VdxcTuJjRFqitSClS-bs5IqwxfhodA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDgzMjQ0NTExOQ=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-832445119-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/832445119" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="zaeByLR5CDWklTWMAFJvgfzogZEjLxVS+8Y38LGPq+BySF0RtbFP22nBnkn9BI4ZesMvcv/4Wr2EPvqDssOyLg==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/832445119/edit_form?textarea_id=issuecomment-832445119-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjQ1ODA5MA=="> <div class="TimelineItem js-comment-container" data-gid="MDEyOklzc3VlQ29tbWVudDgzMjQ1ODA5MA==" data-url="/welldone-software/why-did-you-render/comments/MDEyOklzc3VlQ29tbWVudDgzMjQ1ODA5MA==/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/nikitaNaredi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nikitaNaredi"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/40458363?s=80&v=4" width="40" height="40" alt="@nikitaNaredi" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-832458090"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="12d50ea6fc49fe45017355d2b79cd9adde6b8cb17ad7b83ed71998f6c0562b13"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-832458090-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/nikitaNaredi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nikitaNaredi">nikitaNaredi</a> </strong> commented <a href="#issuecomment-832458090" id="issuecomment-832458090-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-05-05T06:55:54Z" class="no-wrap">May 5, 2021</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDEyOklzc3VlQ29tbWVudDgzMjQ1ODA5MA==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">Thanks <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vzaidman">@vzaidman</a> but still no luck, I have installed and created a craco.config.js. And added the code of <a href="url">https://github.com/welldone-software/why-did-you-render/issues/154#issuecomment-773905769</a><br> I don't know what else it missing.<br> Craco version: <code class="notranslate"> "@craco/craco": "^6.1.2",</code></p> <p dir="auto">And craco.congif.js</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = { babel: { loaderOptions: (babelLoaderOptions) => { const origBabelPresetCRAIndex = babelLoaderOptions.presets.findIndex( (preset) => { return preset[0].includes("babel-preset-react-app"); } ); const origBabelPresetCRA = babelLoaderOptions.presets[origBabelPresetCRAIndex]; babelLoaderOptions.presets[ origBabelPresetCRAIndex ] = function overridenPresetCRA(api, opts, env) { const babelPresetCRAResult = require(origBabelPresetCRA[0])( api, origBabelPresetCRA[1], env ); babelPresetCRAResult.presets.forEach((preset) => { // detect @babel/preset-react with {development: true, runtime: 'automatic'} const isReactPreset = preset && preset[1] && preset[1].runtime === "automatic" && preset[1].development === true; if (isReactPreset) { preset[1].importSource = "@welldone-software/why-did-you-render"; } }); return babelPresetCRAResult; }; return babelLoaderOptions; }, }, // if you want to track react-redux selectors webpack: { alias: { "react-redux": process.env.NODE_ENV === "development" ? "react-redux/lib" : "react-redux", }, }, };"><pre class="notranslate"><code class="notranslate">module.exports = { babel: { loaderOptions: (babelLoaderOptions) => { const origBabelPresetCRAIndex = babelLoaderOptions.presets.findIndex( (preset) => { return preset[0].includes("babel-preset-react-app"); } ); const origBabelPresetCRA = babelLoaderOptions.presets[origBabelPresetCRAIndex]; babelLoaderOptions.presets[ origBabelPresetCRAIndex ] = function overridenPresetCRA(api, opts, env) { const babelPresetCRAResult = require(origBabelPresetCRA[0])( api, origBabelPresetCRA[1], env ); babelPresetCRAResult.presets.forEach((preset) => { // detect @babel/preset-react with {development: true, runtime: 'automatic'} const isReactPreset = preset && preset[1] && preset[1].runtime === "automatic" && preset[1].development === true; if (isReactPreset) { preset[1].importSource = "@welldone-software/why-did-you-render"; } }); return babelPresetCRAResult; }; return babelLoaderOptions; }, }, // if you want to track react-redux selectors webpack: { alias: { "react-redux": process.env.NODE_ENV === "development" ? "react-redux/lib" : "react-redux", }, }, }; </code></pre></div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="H0x-1WytchpM_4hXnT9vr_1qFUG-TWTW6bZl-ehXytDexMmWEfXxjisBjtdxOVLyHvbJCFz0xShMACe0ZkoDuA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="MDEyOklzc3VlQ29tbWVudDgzMjQ1ODA5MA=="> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-832458090-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/832458090" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="q8fUmmfO2fhfuGMdQ90HHTcDw9ZXXE3LwOYRBIycA297pXzy5XxOQfg+/e8pJC66MvbwNj9KaN1zVotx4XJt1Q==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/832458090/edit_form?textarea_id=issuecomment-832458090-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTEzMjI2NTUwNw=="> <div class="TimelineItem"> <div class="TimelineItem-badge"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-cross-reference"> <path d="M2.75 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 13H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 14.543V13H2.75A1.75 1.75 0 0 1 1 11.25v-7.5C1 2.784 1.784 2 2.75 2h5.5a.75.75 0 0 1 0 1.5ZM16 1.25v4.146a.25.25 0 0 1-.427.177L14.03 4.03l-3.75 3.75a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l3.75-3.75-1.543-1.543A.25.25 0 0 1 11.604 1h4.146a.25.25 0 0 1 .25.25Z"></path> </svg> </div> <div class="TimelineItem-body" > <div > <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/justingrant/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/justingrant"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/277214?s=40&v=4" width="20" height="20" alt="@justingrant" /></a> <a class="author Link--primary text-bold" data-hovercard-type="user" data-hovercard-url="/users/justingrant/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/justingrant">justingrant</a> mentioned this issue <a class="Link--secondary" href="#ref-issue-983422526" > <relative-time datetime="2021-08-31T16:14:25Z" class="no-wrap">Aug 31, 2021</relative-time> </a> </div> <div class="mt-2 d-flex flex-items-start flex-column flex-md-row"> <div class="flex-auto wb-break-word" id="ref-issue-983422526" > <a href="/welldone-software/why-did-you-render/issues/210" class="Link--primary f4 text-bold markdown-title" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/210/hovercard"> <code>trackExtraHooks</code> needed for custom hooks defined in my own code? <span class="color-fg-muted text-normal" >#210</span> </a> </div> <div class="flex-shrink-0 my-1 my-md-0 ml-md-3"> <span title="Status: Closed" data-view-component="true" class="State State--merged State--small d-flex flex-items-center"> <svg aria-hidden="true" height="12" viewBox="0 0 16 16" version="1.1" width="12" data-view-component="true" class="octicon octicon-issue-closed flex-items-center mr-1"> <path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path> </svg> Closed </span> </div> </div> </div> </div> <div class="TimelineItem"> <div class="TimelineItem-badge"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-cross-reference"> <path d="M2.75 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 13H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 14.543V13H2.75A1.75 1.75 0 0 1 1 11.25v-7.5C1 2.784 1.784 2 2.75 2h5.5a.75.75 0 0 1 0 1.5ZM16 1.25v4.146a.25.25 0 0 1-.427.177L14.03 4.03l-3.75 3.75a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l3.75-3.75-1.543-1.543A.25.25 0 0 1 11.604 1h4.146a.25.25 0 0 1 .25.25Z"></path> </svg> </div> <div class="TimelineItem-body" > <div > <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/kentr/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/kentr"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/151052?s=40&v=4" width="20" height="20" alt="@kentr" /></a> <a class="author Link--primary text-bold" data-hovercard-type="user" data-hovercard-url="/users/kentr/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/kentr">kentr</a> mentioned this issue <a class="Link--secondary" href="#ref-issue-1019172703" > <relative-time datetime="2021-10-06T20:34:12Z" class="no-wrap">Oct 6, 2021</relative-time> </a> </div> <div class="mt-2 d-flex flex-items-start flex-column flex-md-row"> <div class="flex-auto wb-break-word" id="ref-issue-1019172703" > <a href="/welldone-software/why-did-you-render/issues/214" class="Link--primary f4 text-bold markdown-title" data-hovercard-type="issue" data-hovercard-url="/welldone-software/why-did-you-render/issues/214/hovercard"> Use with Recoil hooks? <span class="color-fg-muted text-normal" >#214</span> </a> </div> <div class="flex-shrink-0 my-1 my-md-0 ml-md-3"> <span title="Status: Closed" data-view-component="true" class="State State--merged State--small d-flex flex-items-center"> <svg aria-hidden="true" height="12" viewBox="0 0 16 16" version="1.1" width="12" data-view-component="true" class="octicon octicon-issue-closed flex-items-center mr-1"> <path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path> </svg> Closed </span> </div> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="IC_kwDOCVvZvc45GOYy"> <div class="TimelineItem js-comment-container" data-gid="IC_kwDOCVvZvc45GOYy" data-url="/welldone-software/why-did-you-render/comments/IC_kwDOCVvZvc45GOYy/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/mkamalkayani/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mkamalkayani"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/17708588?s=80&u=9b02a145f496dcf0fd252d983c916339c80491c8&v=4" width="40" height="40" alt="@mkamalkayani" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-957933106"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="7d3ea879a4a17bd484a75213015c50370c77e13a49f365c88ca549528feeed64"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-957933106-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/mkamalkayani/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mkamalkayani">mkamalkayani</a> </strong> commented <a href="#issuecomment-957933106" id="issuecomment-957933106-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-11-02T16:43:58Z" class="no-wrap">Nov 2, 2021</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">I got this error when I mistakenly used default export for a named export component.</p> <p dir="auto"><code class="notranslate">const useControlledState = require('module-smoove/src/smoove/helpers/useControlledState');</code></p> <p dir="auto">instead of</p> <p dir="auto"><code class="notranslate">const { useControlledState } = require('module-smoove/src/smoove/helpers/useControlledState');</code></p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="67AqaXpi9ZKZFinQsXoQmYJ6mDdMzmKJMkoF5NQpu4oqOJ0qBzp2Bv7oL1BdfC3EYeZEfq53w3eX_EepWjRy4g" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="IC_kwDOCVvZvc45GOYy"> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-957933106-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/957933106" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="cf29NpZD7E+kDobnf2Ui1EKI6sEDurtFDR6b7d5onTZLV/Y1JqQob/X03tcGlNlLEqzZDdGoV0Mvsbn0DiPRoQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/957933106/edit_form?textarea_id=issuecomment-957933106-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="CRE_kwDOEmEi9s5Hi8Rz"> <div class="TimelineItem"> <div class="TimelineItem-badge"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-cross-reference"> <path d="M2.75 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 13H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 14.543V13H2.75A1.75 1.75 0 0 1 1 11.25v-7.5C1 2.784 1.784 2 2.75 2h5.5a.75.75 0 0 1 0 1.5ZM16 1.25v4.146a.25.25 0 0 1-.427.177L14.03 4.03l-3.75 3.75a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l3.75-3.75-1.543-1.543A.25.25 0 0 1 11.604 1h4.146a.25.25 0 0 1 .25.25Z"></path> </svg> </div> <div class="TimelineItem-body" > <div > <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/derneuere/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/derneuere"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/6658807?s=40&v=4" width="20" height="20" alt="@derneuere" /></a> <a class="author Link--primary text-bold" data-hovercard-type="user" data-hovercard-url="/users/derneuere/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/derneuere">derneuere</a> mentioned this issue <a class="Link--secondary" href="#ref-pullrequest-1287886382" > <relative-time datetime="2022-07-14T21:27:37Z" class="no-wrap">Jul 14, 2022</relative-time> </a> </div> <div class="mt-2 d-flex flex-items-start flex-column flex-md-row"> <div class="flex-auto wb-break-word" id="ref-pullrequest-1287886382" > <a href="/LibrePhotos/librephotos-frontend/pull/73" class="Link--primary f4 text-bold markdown-title" data-hovercard-type="pull_request" data-hovercard-url="/LibrePhotos/librephotos-frontend/pull/73/hovercard"> move worker availability request to rtk query <span class="color-fg-muted text-normal" >LibrePhotos/librephotos-frontend#73</span> </a> </div> <div class="flex-shrink-0 my-1 my-md-0 ml-md-3"> <span title="Status: Merged" data-view-component="true" class="State State--merged State--small"> <svg height="14" class="octicon octicon-git-merge" viewBox="0 0 16 16" version="1.1" width="14" aria-hidden="true"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"></path></svg> Merged </span> </div> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="IC_kwDOCVvZvc5bBRRq"> <div class="TimelineItem js-comment-container" data-gid="IC_kwDOCVvZvc5bBRRq" data-url="/welldone-software/why-did-you-render/comments/IC_kwDOCVvZvc5bBRRq/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/tomekzaw/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/tomekzaw"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/20516055?s=80&u=c3e23ccbbd88cf59c9f2a8566d76a767f43b6cb2&v=4" width="40" height="40" alt="@tomekzaw" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-1527059562"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="d2c357d9f89fba4537ffff9ca397bc66a9505d8eaac986d45fb39687722c8c10"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-1527059562-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/tomekzaw/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/tomekzaw">tomekzaw</a> </strong> commented <a href="#issuecomment-1527059562" id="issuecomment-1527059562-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2023-04-28T06:34:14Z" class="no-wrap">Apr 28, 2023</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">Hey all, I got a similar error when trying to use why-did-you-render 7.0.1 with <strong>React Native</strong> 0.71.6 and react-redux 8.0.5:</p> <div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError: Cannot assign to property 'useSelector' which has only a getter, js engine: hermes"><pre class="notranslate"><code class="notranslate">TypeError: Cannot assign to property 'useSelector' which has only a getter, js engine: hermes </code></pre></div> <p dir="auto">Fortunately, it's possible to fix it with the following two patches:</p> <p dir="auto"><code class="notranslate">@welldone-software+why-did-you-render+7.0.1.patch</code></p> <div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="diff --git a/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js b/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js index fabd293..0d6a323 100644 --- a/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js +++ b/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js @@ -5,8 +5,9 @@ var WDYR = require('@welldone-software/why-did-you-render') var origJsxDev = jsxDevRuntime.jsxDEV var wdyrStore = WDYR.wdyrStore -module.exports = jsxDevRuntime -module.exports.jsxDEV = function jsxDEV(){ +module.exports = { + ...jsxDevRuntime, + jsxDEV: function jsxDEV(){ var args = Array.prototype.slice.call(arguments) if(wdyrStore.React && wdyrStore.React.isWDYR){ @@ -35,4 +36,4 @@ module.exports.jsxDEV = function jsxDEV(){ } return origJsxDev.apply(null, args) -} +}}"><pre class="notranslate"><span class="pl-c1">diff --git a/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js b/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js</span> index fabd293..0d6a323 100644 <span class="pl-md">--- a/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js</span> <span class="pl-mi1">+++ b/node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js</span> <span class="pl-mdr">@@ -5,8 +5,9 @@</span> var WDYR = require('@welldone-software/why-did-you-render') var origJsxDev = jsxDevRuntime.jsxDEV var wdyrStore = WDYR.wdyrStore <span class="pl-md"><span class="pl-md">-</span>module.exports = jsxDevRuntime</span> <span class="pl-md"><span class="pl-md">-</span>module.exports.jsxDEV = function jsxDEV(){</span> <span class="pl-mi1"><span class="pl-mi1">+</span>module.exports = {</span> <span class="pl-mi1"><span class="pl-mi1">+</span> ...jsxDevRuntime,</span> <span class="pl-mi1"><span class="pl-mi1">+</span> jsxDEV: function jsxDEV(){</span> var args = Array.prototype.slice.call(arguments) if(wdyrStore.React && wdyrStore.React.isWDYR){ <span class="pl-mdr">@@ -35,4 +36,4 @@</span> module.exports.jsxDEV = function jsxDEV(){ } return origJsxDev.apply(null, args) <span class="pl-md"><span class="pl-md">-</span>}</span> <span class="pl-mi1"><span class="pl-mi1">+</span>}}</span></pre></div> <p dir="auto"><code class="notranslate">react-redux+8.0.5.patch</code></p> <div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="diff --git a/node_modules/react-redux/lib/exports.js b/node_modules/react-redux/lib/exports.js index 4235b88..a2065c5 100644 --- a/node_modules/react-redux/lib/exports.js +++ b/node_modules/react-redux/lib/exports.js @@ -49,6 +49,9 @@ Object.defineProperty(exports, "useSelector", { enumerable: true, get: function () { return _useSelector.useSelector; + }, + set: function (value) { + _useSelector.useSelector = value; } }); Object.defineProperty(exports, "createSelectorHook", { diff --git a/node_modules/react-redux/lib/index.js b/node_modules/react-redux/lib/index.js index 07dcece..e8f176f 100644 --- a/node_modules/react-redux/lib/index.js +++ b/node_modules/react-redux/lib/index.js @@ -33,6 +33,9 @@ Object.keys(_exports).forEach(function (key) { enumerable: true, get: function () { return _exports[key]; + }, + set: function (value) { + _exports[key] = value; } }); });"><pre class="notranslate"><span class="pl-c1">diff --git a/node_modules/react-redux/lib/exports.js b/node_modules/react-redux/lib/exports.js</span> index 4235b88..a2065c5 100644 <span class="pl-md">--- a/node_modules/react-redux/lib/exports.js</span> <span class="pl-mi1">+++ b/node_modules/react-redux/lib/exports.js</span> <span class="pl-mdr">@@ -49,6 +49,9 @@</span> Object.defineProperty(exports, "useSelector", { enumerable: true, get: function () { return _useSelector.useSelector; <span class="pl-mi1"><span class="pl-mi1">+</span> },</span> <span class="pl-mi1"><span class="pl-mi1">+</span> set: function (value) {</span> <span class="pl-mi1"><span class="pl-mi1">+</span> _useSelector.useSelector = value;</span> } }); Object.defineProperty(exports, "createSelectorHook", { <span class="pl-c1">diff --git a/node_modules/react-redux/lib/index.js b/node_modules/react-redux/lib/index.js</span> index 07dcece..e8f176f 100644 <span class="pl-md">--- a/node_modules/react-redux/lib/index.js</span> <span class="pl-mi1">+++ b/node_modules/react-redux/lib/index.js</span> <span class="pl-mdr">@@ -33,6 +33,9 @@</span> Object.keys(_exports).forEach(function (key) { enumerable: true, get: function () { return _exports[key]; <span class="pl-mi1"><span class="pl-mi1">+</span> },</span> <span class="pl-mi1"><span class="pl-mi1">+</span> set: function (value) {</span> <span class="pl-mi1"><span class="pl-mi1">+</span> _exports[key] = value;</span> } }); });</pre></div> <p dir="auto">Here are my files:</p> <p dir="auto"><code class="notranslate">wdyr.js</code></p> <div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'; if (__DEV__) { const whyDidYouRender = require('@welldone-software/why-did-you-render'); const ReactRedux = require('react-redux'); whyDidYouRender(React, { trackAllPureComponents: true, logOnDifferentValues: true, trackExtraHooks: [[ReactRedux, 'useSelector']], }); }"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">__DEV__</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">const</span> <span class="pl-s1">whyDidYouRender</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'@welldone-software/why-did-you-render'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">const</span> <span class="pl-smi">ReactRedux</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'react-redux'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-en">whyDidYouRender</span><span class="pl-kos">(</span><span class="pl-smi">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">trackAllPureComponents</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">logOnDifferentValues</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">trackExtraHooks</span>: <span class="pl-kos">[</span><span class="pl-kos">[</span><span class="pl-smi">ReactRedux</span><span class="pl-kos">,</span> <span class="pl-s">'useSelector'</span><span class="pl-kos">]</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span></pre></div> <p dir="auto"><code class="notranslate">babel.plugin.js</code></p> <div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = { presets: [ [ 'module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }, ], [ '@babel/preset-react', { importSource: '@welldone-software/why-did-you-render', runtime: 'automatic', development: true, }, ], ], plugins: ['react-native-reanimated/plugin'], };"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">presets</span>: <span class="pl-kos">[</span> <span class="pl-kos">[</span> <span class="pl-s">'module:metro-react-native-babel-preset'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">useTransformReactJSXExperimental</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span> <span class="pl-s">'@babel/preset-react'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">importSource</span>: <span class="pl-s">'@welldone-software/why-did-you-render'</span><span class="pl-kos">,</span> <span class="pl-c1">runtime</span>: <span class="pl-s">'automatic'</span><span class="pl-kos">,</span> <span class="pl-c1">development</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span><span class="pl-s">'react-native-reanimated/plugin'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="vScek7UDKy7HNmhEOOJie5APUq7XaCjCJbKGoTGfEMF8r6nQyFuouqDIbsTU5F8mc5OO5zXRiTyABMTsv4LZqQ" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="IC_kwDOCVvZvc5bBRRq"> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-e8fc00" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">3</span> </button> <tool-tip id="tooltip-7009ff03-1305-4b6e-b34e-35e95e4fece8" for="reactions--reaction_button_component-e8fc00" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">chmiiller, Ebaneck, and borisyankov reacted with thumbs up emoji</tool-tip> <button name="input[content]" id="reactions--reaction_button_component-a3d8c4" value="HEART react" data-button-index-position="5" data-reaction-label="Heart" data-reaction-content="heart" aria-pressed="false" aria-label="react with heart" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="heart" fallback-src="https://github.githubassets.com/assets/2764-982dc91ea48a.png" class="social-button-emoji">❤️</g-emoji> <span class="js-discussion-reaction-group-count">2</span> </button> <tool-tip id="tooltip-e76ba2df-912a-46b8-968e-7886f85d4070" for="reactions--reaction_button_component-a3d8c4" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">chmiiller and Wedvich reacted with heart emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="chmiiller, Ebaneck, and borisyankov reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>3 reactions</span> </li> <li class="dropdown-item" aria-label="chmiiller and Wedvich reacted with heart emoji"> <g-emoji alias="heart" fallback-src="https://github.githubassets.com/assets/2764-982dc91ea48a.png" class="social-button-emoji mr-2">❤️</g-emoji> <span>2 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-1527059562-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/1527059562" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="33rOp/pB1r54QM00/GsTamQOHzqIldix58GLuIbglYXKh/JpCqmIgl2/5d/WL7cZ5uiKI6Z2ba6PemXHJUqJvA==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/1527059562/edit_form?textarea_id=issuecomment-1527059562-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="IC_kwDOCVvZvc5eAAv5"> <div class="TimelineItem js-comment-container" data-gid="IC_kwDOCVvZvc5eAAv5" data-url="/welldone-software/why-did-you-render/comments/IC_kwDOCVvZvc5eAAv5/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/chmiiller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/chmiiller"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/1013632?s=80&u=a4324d148c2cd72f65067a8da34fd296956b30bc&v=4" width="40" height="40" alt="@chmiiller" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-1577061369"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="cca47145a08d40ffa333cbd7394109a9f1af9f1dd871cf41b18aa27fbe51f8a8"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-1577061369-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/chmiiller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/chmiiller">chmiiller</a> </strong> commented <a href="#issuecomment-1577061369" id="issuecomment-1577061369-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2023-06-05T15:55:58Z" class="no-wrap">Jun 5, 2023</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">I have the exactly same as <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tomekzaw/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tomekzaw">@tomekzaw</a> , is there a solution for it?</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="Sl1KeAx5_n2aQJED6LVk-AGUcYVP63l2l-DNpx2EafCL1f07cSF96f2-l4MEs1ml4gitzK1S2IgyVo_qk5mgmA" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="IC_kwDOCVvZvc5eAAv5"> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-1577061369-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/1577061369" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="fxt/lbbY4JppP3PGOjGWa/A7gNB0VUDH4ufzGxY0tZDtfxJcEmvHuH9a7VJxBtfe8nXj4QOAOnpWGNh/0GyLUA==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/1577061369/edit_form?textarea_id=issuecomment-1577061369-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="IC_kwDOCVvZvc5eA0AV"> <div class="TimelineItem js-comment-container" data-gid="IC_kwDOCVvZvc5eA0AV" data-url="/welldone-software/why-did-you-render/comments/IC_kwDOCVvZvc5eA0AV/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/tomekzaw/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/tomekzaw"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/20516055?s=80&u=c3e23ccbbd88cf59c9f2a8566d76a767f43b6cb2&v=4" width="40" height="40" alt="@tomekzaw" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-1577271317"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="34845d9b08fb3f03e4d7f4e80e12eadf1805a6cf69acb77e79fa69835b1b6a03"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-1577271317-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/tomekzaw/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/tomekzaw">tomekzaw</a> </strong> commented <a href="#issuecomment-1577271317" id="issuecomment-1577271317-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2023-06-05T18:29:33Z" class="no-wrap">Jun 5, 2023</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/chmiiller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/chmiiller">@chmiiller</a>, have you tried the solution from my comment? It worked for me back then. You need to modify 2 files:</p> <ul dir="auto"> <li><code class="notranslate">node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js</code></li> <li><code class="notranslate">node_modules/react-redux/lib/exports.js</code></li> </ul> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="A6r8bbdodKGZGMAQNVOFK5LJ-GRduzZ_M3BEqD32C-bCIksuyjD3Nf7mxpDZVbh2cVUkLb8Cl4GWxgbls-vCjg" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="IC_kwDOCVvZvc5eA0AV"> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-c5fb28" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">2</span> </button> <tool-tip id="tooltip-2847fc9a-9547-4da5-904e-9669ed41e99d" for="reactions--reaction_button_component-c5fb28" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">chmiiller and borisyankov reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="chmiiller and borisyankov reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>2 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-1577271317-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/1577271317" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="XQRFz21xqd0XymNlwkZr8j35Nv3YbN/1I6TkmYlZrIFNBP7pwmB8cXSfXvQwggQhr0QA120bFuTBp0GZFsO/ZQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/1577271317/edit_form?textarea_id=issuecomment-1577271317-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="IC_kwDOCVvZvc5eHHRx"> <div class="TimelineItem js-comment-container" data-gid="IC_kwDOCVvZvc5eHHRx" data-url="/welldone-software/why-did-you-render/comments/IC_kwDOCVvZvc5eHHRx/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/chmiiller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/chmiiller"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/1013632?s=80&u=a4324d148c2cd72f65067a8da34fd296956b30bc&v=4" width="40" height="40" alt="@chmiiller" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-1578923121"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="600e9e9d705e4f271b8dbdb25feda7f0264678d76739e6faf6dce949754319a0"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-1578923121-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/chmiiller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/chmiiller">chmiiller</a> </strong> commented <a href="#issuecomment-1578923121" id="issuecomment-1578923121-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2023-06-06T14:55:33Z" class="no-wrap">Jun 6, 2023</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">yes, I've tried that and it works <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tomekzaw/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tomekzaw">@tomekzaw</a> , thanks for that! I'm just saying that maybe this patch on <code class="notranslate">jsx-dev-runtime</code> should be merged in the source code of why-did-you-render.</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="sp0_IhnlyozyYslIkKxHiVqEpaPqzLNKdMoNAURs-b9zFYhhZL1JGJWcz8h8qnrUuRh56gh1ErTRfE9MynEw1w" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="IC_kwDOCVvZvc5eHHRx"> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-aa29fd" value="THUMBS_UP react" data-button-index-position="0" data-reaction-label="+1" data-reaction-content="+1" aria-pressed="false" aria-label="react with thumbs up" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji">👍</g-emoji> <span class="js-discussion-reaction-group-count">3</span> </button> <tool-tip id="tooltip-d9982f0b-d71e-488c-880c-5f321c195d4a" for="reactions--reaction_button_component-aa29fd" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">tomekzaw, borisyankov, and michaelberkhahn reacted with thumbs up emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="tomekzaw, borisyankov, and michaelberkhahn reacted with thumbs up emoji"> <g-emoji alias="+1" fallback-src="https://github.githubassets.com/assets/1f44d-41cb66fe1e22.png" class="social-button-emoji mr-2">👍</g-emoji> <span>3 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-1578923121-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/1578923121" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="XhL2r1EWcLu+Lq6wDGq5nvLIbYo0e3ERTS5z9/kVBO6gItYQXKaJKf0wAYag7u7LIBq7acW3rqJYRGi1hFz4Aw==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/1578923121/edit_form?textarea_id=issuecomment-1578923121-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="IC_kwDOCVvZvc5qn66R"> <div class="TimelineItem js-comment-container" data-gid="IC_kwDOCVvZvc5qn66R" data-url="/welldone-software/why-did-you-render/comments/IC_kwDOCVvZvc5qn66R/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/Furqan558/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Furqan558"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/65661394?s=80&u=c5608908cfb977f4dfcfb7bee15c5421cd2a6ab1&v=4" width="40" height="40" alt="@Furqan558" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-1788849809"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="dd3718e964525fa450b5ca17f8b56c0dae65d24a1bd5b8fb0cdcc95b682270f7"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-1788849809-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/Furqan558/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Furqan558">Furqan558</a> </strong> commented <a href="#issuecomment-1788849809" id="issuecomment-1788849809-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2023-11-01T12:11:26Z" class="no-wrap">Nov 1, 2023</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <blockquote> <p dir="auto">Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/chmiiller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/chmiiller">@chmiiller</a>, have you tried the solution from my comment? It worked for me back then. You need to modify 2 files:</p> <ul dir="auto"> <li><code class="notranslate">node_modules/@welldone-software/why-did-you-render/jsx-dev-runtime.js</code></li> <li><code class="notranslate">node_modules/react-redux/lib/exports.js</code></li> </ul> </blockquote> <p dir="auto">exports.js doesn't exist <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tomekzaw/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tomekzaw">@tomekzaw</a></p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="6tLkdMP-H8tPrmZN4aRwzsNwdEokXSWFmWJyblK7wDsrWlM3vqacXyhQYM0Nok2TIOyoA8bkhHs81DAj3KYJUw" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="IC_kwDOCVvZvc5qn66R"> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-1788849809-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/1788849809" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="djYR/4ANZlim5dRR3uKbrlzph2WSq/ug7WEGXuA39agXBQR7obQcuEBgiOMNuFpquAqehWNWWnMZzyYVqoxdrQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/1788849809/edit_form?textarea_id=issuecomment-1788849809-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="IC_kwDOCVvZvc5tuh8l"> <div class="TimelineItem js-comment-container" data-gid="IC_kwDOCVvZvc5tuh8l" data-url="/welldone-software/why-did-you-render/comments/IC_kwDOCVvZvc5tuh8l/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/Hypnosphi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Hypnosphi"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/6651625?s=80&u=2f6a36f9d4bcb42602cae8d5b099cd96445f6f3c&v=4" width="40" height="40" alt="@Hypnosphi" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-1840914213"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="3d8acd617fbee3334f8c72699278f222fa7649f646ef7543c9b8f646d155851b"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-1840914213-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user has previously committed to the why-did-you-render repository." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Contributor</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/Hypnosphi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Hypnosphi">Hypnosphi</a> </strong> commented <a href="#issuecomment-1840914213" id="issuecomment-1840914213-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2023-12-05T14:34:24Z" class="no-wrap">Dec 5, 2023</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">The UMD build was removed in <code class="notranslate">react-redux@9.0</code> so the workaround doesn't work anymore</p> <p dir="auto"><a href="https://redux.js.org/usage/migrations/migrating-rtk-2#dropping-umd-builds" rel="nofollow">https://redux.js.org/usage/migrations/migrating-rtk-2#dropping-umd-builds</a></p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container has-reactions d-flex"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="relxOJTI8F4KSI8jtvDBKPufvkJur2EvbD2yElmUYKNsYcZ76ZBzym22iaNa9vx1GANiC4wWwNHJi_Bf14mpyw" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="IC_kwDOCVvZvc5tuh8l"> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <button name="input[content]" id="reactions--reaction_button_component-9bd31f" value="CONFUSED react" data-button-index-position="4" data-reaction-label="Confused" data-reaction-content="thinking_face" aria-pressed="false" aria-label="react with confused" type="submit" disabled="disabled" data-view-component="true" class="social-reaction-summary-item js-reaction-group-button btn-link d-flex no-underline color-fg-muted flex-items-baseline mr-2"> <g-emoji alias="thinking_face" fallback-src="https://github.githubassets.com/assets/1f615-4bb1369c4251.png" class="social-button-emoji">😕</g-emoji> <span class="js-discussion-reaction-group-count">5</span> </button> <tool-tip id="tooltip-b1ff5f0b-8629-4089-adca-8219bbbecfe9" for="reactions--reaction_button_component-9bd31f" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">mirague, jkoutavas, thib3113, TheBrainChain, and joao-esteves reacted with confused emoji</tool-tip> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> <li class="dropdown-item" aria-label="mirague, jkoutavas, thib3113, TheBrainChain, and joao-esteves reacted with confused emoji"> <g-emoji alias="thinking_face" fallback-src="https://github.githubassets.com/assets/1f615-4bb1369c4251.png" class="social-button-emoji mr-2">😕</g-emoji> <span>5 reactions</span> </li> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-1840914213-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/1840914213" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="zx3uOn1YRoMelkavJ1CFLc9ZJ3zsyqoWwMaXyiA8XEPd+sbsPbUl28eQwe6db9ENWUkQb8J7vRN5rJ9rbMu60g==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/1840914213/edit_form?textarea_id=issuecomment-1840914213-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="IC_kwDOCVvZvc56LO8z"> <div class="TimelineItem js-comment-container" data-gid="IC_kwDOCVvZvc56LO8z" data-url="/welldone-software/why-did-you-render/comments/IC_kwDOCVvZvc56LO8z/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/TomerAtarScopio/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/TomerAtarScopio"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/75929819?s=80&u=60bc6b796a905ee30af61964be9de99259a8051d&v=4" width="40" height="40" alt="@TomerAtarScopio" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-2049765171"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="e6fe0ef8533791ebabbb9acbb9bc9e33ea483a9b82f793e108089990e6151d66"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-2049765171-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/TomerAtarScopio/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/TomerAtarScopio">TomerAtarScopio</a> </strong> commented <a href="#issuecomment-2049765171" id="issuecomment-2049765171-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2024-04-11T14:01:52Z" class="no-wrap">Apr 11, 2024</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">I had stumbled here getting the same message but without using any hooks, seems that my configuration was wrong (as our project had been using an old react version prior to the upgrade)</p> <div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="- import * as React from 'react'; + import React from 'react'; if (process.env.NODE_ENV === 'development') { const whyDidYouRender = require('@welldone-software/why-did-you-render'); whyDidYouRender(React, { trackAllPureComponents: false, }); }"><pre class="notranslate"><span class="pl-md"><span class="pl-md">-</span> import * as React from 'react';</span> <span class="pl-mi1"><span class="pl-mi1">+</span> import React from 'react';</span> if (process.env.NODE_ENV === 'development') { const whyDidYouRender = require('@welldone-software/why-did-you-render'); whyDidYouRender(React, { trackAllPureComponents: false, }); }</pre></div> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="5lg1wKYm989bsBaKWLo0uEc-0S8nsHx5v6rttOyVar8n0IKD2350WzxOEAq0vAnlpKINZsUJ3YcaHK_5Yoij1w" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="IC_kwDOCVvZvc56LO8z"> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-2049765171-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/2049765171" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="chTPZ0r3dF7soybRf6TF6pFXlpqS8edXDFgQ++0rn4oGKFMQNDvlIMWU55hfDvKofToonaTwPCRAsWOkN5aBUw==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/2049765171/edit_form?textarea_id=issuecomment-2049765171-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="IC_kwDOCVvZvc563VRY"> <div class="TimelineItem js-comment-container" data-gid="IC_kwDOCVvZvc563VRY" data-url="/welldone-software/why-did-you-render/comments/IC_kwDOCVvZvc563VRY/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/chmiiller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/chmiiller"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/1013632?s=80&u=a4324d148c2cd72f65067a8da34fd296956b30bc&v=4" width="40" height="40" alt="@chmiiller" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-2061325400"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="ba362b97e718e87cd7a5335f99bae744dd6759658f354b00603d5fb17577b725"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-2061325400-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/chmiiller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/chmiiller">chmiiller</a> </strong> commented <a href="#issuecomment-2061325400" id="issuecomment-2061325400-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2024-04-17T13:55:47Z" class="no-wrap">Apr 17, 2024</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">was that enough for you to fix it on <code class="notranslate">react-redux@9.x</code> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/TomerAtarScopio/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/TomerAtarScopio">@TomerAtarScopio</a> ?</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="eYAvYtiCYYJCBHgUkXiBCo4IUZO1YgPLXVAQYFt4Pou4CJghpdriFiX6fpR9frxXbZSN2lfbojX45lIt1WX34w" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="IC_kwDOCVvZvc563VRY"> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-2061325400-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/2061325400" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="28AOFhop77Y2hNHgWHTx7qwL2wcSaj4CgPMJjS33DuKPySEkHLr2lC2HR0p3QnSnCmbCDI8XLiUQSYP2QS4T+Q==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/2061325400/edit_form?textarea_id=issuecomment-2061325400-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <div class="js-timeline-item js-timeline-progressive-focus-container" data-gid="IC_kwDOCVvZvc6S1TX1"> <div class="TimelineItem js-comment-container" data-gid="IC_kwDOCVvZvc6S1TX1" data-url="/welldone-software/why-did-you-render/comments/IC_kwDOCVvZvc6S1TX1/partials/timeline_issue_comment" > <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/Nantris/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Nantris"><img class="avatar rounded-2 avatar-user" src="https://avatars.githubusercontent.com/u/6835891?s=80&u=b310395ee4606daf26f1924b67b9cbf418af44e3&v=4" width="40" height="40" alt="@Nantris" /></a> </div> <div class=" timeline-comment-group js-minimizable-comment-group js-targetable-element TimelineItem-body my-0 " id="issuecomment-2463446517"> <div class="ml-n3 timeline-comment unminimized-comment comment previewable-edit js-task-list-container js-comment timeline-comment--caret" data-body-version="efa8c187a90bfe02ff5874427b458cd9b5eedb2edecdeae801f6195371981bf3"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="issuecomment-2463446517-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " show_full_name="false" data-hovercard-type="user" data-hovercard-url="/users/Nantris/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Nantris">Nantris</a> </strong> commented <a href="#issuecomment-2463446517" id="issuecomment-2463446517-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2024-11-07T23:51:13Z" class="no-wrap">Nov 7, 2024</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <table class="d-block user-select-contain" data-paste-markdown-skip> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body"> <p dir="auto">Is there any solution for this?</p> </td> </tr> </tbody> </table> </task-lists> <div class="d-flex"> <div class="pr-review-reactions"> <div data-view-component="true" class="comment-reactions js-reactions-container js-reaction-buttons-container social-reactions reactions-container d-none"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-pick-reaction" data-turbo="false" action="/welldone-software/why-did-you-render/reactions" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="nmqag9SiAphg2PyGT1LeOdYLMaXQgfh1uApXvTQMMBZf4i3AqfqBDAcm-gajVONkNZft7DI4WYsdvBXwuhH5fg" autocomplete="off" /> <input type="hidden" name="input[subjectId]" value="IC_kwDOCVvZvc6S1TX1"> <input type="hidden" name="input[context]" value="" > <div class="js-comment-reactions-options d-flex flex-items-center flex-row flex-wrap"> <div class="js-reactions-container"> <details class="dropdown details-reset details-overlay d-inline-block js-all-reactions-popover" hidden> <summary aria-haspopup="true" data-view-component="true" class="Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label">All reactions</span> </span> </summary> <ul class="dropdown-menu dropdown-menu-se"> </ul> </details> </div> </div> </form></div> </div> </div> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" id="issuecomment-2463446517-edit-form" data-turbo="false" action="/welldone-software/why-did-you-render/issue_comments/2463446517" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="Jfn/A5Qwhny4SAuPvpIb1CzxK5RazwsltfbQxQ5LIs+DPvlryHST+b4bHQVR4m2eYGP2WQhETOXTTfCdsLQRwQ==" /> <include-fragment loading="lazy" src="/welldone-software/why-did-you-render/issue_comments/2463446517/edit_form?textarea_id=issuecomment-2463446517-body&comment_context=" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> </div> </div> <!-- Rendered timeline since 2024-11-07 15:51:13 --> <div class="js-timeline-marker js-socket-channel js-updatable-content" id="partial-timeline" data-channel="eyJjIjoiaXNzdWU6NTU3OTUzNDQ5IiwidCI6MTczMjg1MjY3NX0=--5636ac80d598568dde2770cb2872a260ffece73a02297c7e9cb470503f6c02da" data-url="/welldone-software/why-did-you-render/issues/85/partials/unread_timeline?issue=85&since=2024-11-07T23%3A51%3A13.000000000Z" data-last-modified="2024-11-07T23:51:13.000000000Z" data-morpheus-enabled="false" data-gid="MDU6SXNzdWU1NTc5NTM0NDk="> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="d-none js-timeline-marker-form" data-turbo="false" action="/_graphql/MarkNotificationSubjectAsRead" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="yz+orEkcVj4Rfbv9ErAvbyhm9OKqCCJliBVtI75gnZfm8SK636V0oAFqpWxlSIR278MdWFRCKN9ax0pv5YcsfA==" /> <input type="hidden" name="variables[subjectId]" value="MDU6SXNzdWU1NTc5NTM0NDk="> </form> </div> </div> </div> <span id="issue-comment-box"></span> <div class="discussion-timeline-actions"> <div data-view-component="true" class="flash flash-warn mt-3"> <a rel="nofollow" class="btn btn-primary" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"signed out comment","repository_id":157014461,"auth_type":"SIGN_UP","originating_url":"https://github.com/welldone-software/why-did-you-render/issues/85","user_id":null}}" data-hydro-click-hmac="d94851166f229ebb6f462e486b0ac3fa8add7883ebea88b486ee347bbaab829b" href="/join?source=comment-repo">Sign up for free</a> <strong>to join this conversation on GitHub</strong>. Already have an account? <a rel="nofollow" class="Link--inTextBlock" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"signed out comment","repository_id":157014461,"auth_type":"LOG_IN","originating_url":"https://github.com/welldone-software/why-did-you-render/issues/85","user_id":null}}" data-hydro-click-hmac="ce757dcc3cc3716141c858ee75f9bca77e580dd958f204782c8bd9c0fe2ce78a" data-test-selector="comments-sign-in-link" href="/login?return_to=https%3A%2F%2Fgithub.com%2Fwelldone-software%2Fwhy-did-you-render%2Fissues%2F85">Sign in to comment</a> </div> </div> </div> </div> <div data-view-component="true" class="Layout-sidebar"> <div id="partial-discussion-sidebar" class="js-socket-channel js-updatable-content" data-channel="eyJjIjoiaXNzdWU6NTU3OTUzNDQ5IiwidCI6MTczMjg1MjY3NH0=--ecba8fd904b23df43e0a266c4964b67916547d5dce76fa12f93fe0b6f0708691" data-gid="MDU6SXNzdWU1NTc5NTM0NDk=" data-url="/welldone-software/why-did-you-render/issues/85/show_partial?partial=issues%2Fsidebar" data-project-hovercards-enabled> <div class="discussion-sidebar-item sidebar-assignee js-discussion-sidebar-item" > <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-issue-sidebar-form" aria-label="Select assignees" data-turbo="false" action="/welldone-software/why-did-you-render/issues/85/assignees" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="mtfuyOGEa3yC2kKnE+wFSyGfjMpQuV//HLSi+z7LDUlf90t9On0GfFKR5uZg1tEQE90IIQZXW7Q7MnJo9IzJPA==" /> <div class="discussion-sidebar-heading text-bold"> Assignees </div> <span class="css-truncate js-issue-assignees"> No one assigned </span> </form></div> <div class="discussion-sidebar-item js-discussion-sidebar-item" > <div class="discussion-sidebar-heading text-bold"> Labels </div> <div class="js-issue-labels d-flex flex-wrap"> <a id="label-bfe37d" href="/welldone-software/why-did-you-render/labels/bug" data-name="bug" style="--label-r:215;--label-g:58;--label-b:74;--label-h:353;--label-s:66;--label-l:53;" data-view-component="true" class="IssueLabel hx_IssueLabel width-fit mb-1 mr-1"> <span class="css-truncate css-truncate-target width-fit">bug</span> </a> <tool-tip id="tooltip-e1d26d09-bd64-4aeb-84cf-13016729c723" for="label-bfe37d" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">Something isn't working</tool-tip> <a id="label-87700a" href="/welldone-software/why-did-you-render/labels/Low%20priority" data-name="Low priority" style="--label-r:215;--label-g:226;--label-b:95;--label-h:65;--label-s:69;--label-l:62;" data-view-component="true" class="IssueLabel hx_IssueLabel width-fit mb-1 mr-1"> <span class="css-truncate css-truncate-target width-fit">Low priority</span> </a> <a id="label-fabfa0" href="/welldone-software/why-did-you-render/labels/wontfix" data-name="wontfix" style="--label-r:221;--label-g:221;--label-b:221;--label-h:0;--label-s:0;--label-l:86;" data-view-component="true" class="IssueLabel hx_IssueLabel width-fit mb-1 mr-1"> <span class="css-truncate css-truncate-target width-fit">wontfix</span> </a> <tool-tip id="tooltip-31421f8e-b5d9-4ec5-9579-b963d5f1824a" for="label-fabfa0" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">This will not be worked on</tool-tip> <a id="label-9e654d" href="/welldone-software/why-did-you-render/labels/workaround%20available" data-name="workaround available" style="--label-r:251;--label-g:202;--label-b:4;--label-h:48;--label-s:96;--label-l:50;" data-view-component="true" class="IssueLabel hx_IssueLabel width-fit mb-1 mr-1"> <span class="css-truncate css-truncate-target width-fit">workaround available</span> </a> <tool-tip id="tooltip-ab43d6b6-52aa-40ea-8e12-ff7433747e6d" for="label-9e654d" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">A workaround is available in the issue's comments</tool-tip> </div> </div> <div class="discussion-sidebar-item js-discussion-sidebar-item" > <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-issue-sidebar-form" aria-label="Select projects" data-turbo="false" action="/welldone-software/why-did-you-render/projects/issues/85" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="uXjsKtWtJycSp9ubruRND/RDcl5GEq1EY+xJmG1FG0mf2J11n6tCu/LCbhpCpZI71RpqH3AdpMsGKEXK+2SnKA==" /> <div class="discussion-sidebar-heading text-bold"> Projects </div> <div aria-live="polite"> </div> <span class="css-truncate sidebar-progress-bar"> None yet </span> </form> </div> <div class="discussion-sidebar-item sidebar-progress-bar js-discussion-sidebar-item" > <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-issue-sidebar-form" aria-label="Select milestones" data-turbo="false" action="/welldone-software/why-did-you-render/issues/85/set_milestone?partial=issues%2Fsidebar%2Fshow%2Fmilestone" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="MEGvfzlVunZpYv7OC3+xS1BHedco/+4Ce3nc4hWvR6WtqOsEP9eiN78kBgoWs7wJ/hQkOpsZagGiS3Vgb79CmQ==" /> <div class="discussion-sidebar-heading text-bold"> Milestone </div> No milestone </form></div> <create-branch data-default-repo="welldone-software/why-did-you-render" data-selected-nwo="welldone-software/why-did-you-render" data-default-source-branch="master" data-sidebar-url="/welldone-software/why-did-you-render/issues/closing_references/partials/sidebar?source_id=557953449&source_type=ISSUE" class="discussion-sidebar-item d-block"> <div class="js-discussion-sidebar-item" data-target="create-branch.sidebarContainer"> <div data-issue-and-pr-hovercards-enabled > <development-menu> <!-- '"` --><!-- </textarea></xmp> --></option></form><form data-target="create-branch.developmentForm" data-turbo="false" class="js-issue-sidebar-form" aria-label="Link issues" action="/welldone-software/why-did-you-render/issues/closing_references?source_id=557953449&source_type=ISSUE" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" data-csrf="true" name="authenticity_token" value="5iiF9/9Oy3rURfWfWfshLmnKFY6K52aLGpkD1NLZVPwXZJJBQP5l4ArC2N0BNvIW/WfrxZlOFi5wqxgDocX9pg==" /> <div class="discussion-sidebar-heading text-bold" > Development </div> <p>No branches or pull requests</p> </form> </development-menu> </div> </div> </create-branch> <div id="partial-users-participants" class="discussion-sidebar-item"> <div class="participation"> <div class="discussion-sidebar-heading text-bold"> 24 participants </div> <div class="participation-avatars d-flex flex-wrap"> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/thoughtsofcode/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/thoughtsofcode"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/164713?s=52&v=4" width="26" height="26" alt="@thoughtsofcode" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/AdrienLemaire/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/AdrienLemaire"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/260983?s=52&v=4" width="26" height="26" alt="@AdrienLemaire" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/steveadams/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/steveadams"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/457207?s=52&v=4" width="26" height="26" alt="@steveadams" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/chaomao/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/chaomao"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/817897?s=52&v=4" width="26" height="26" alt="@chaomao" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/chmiiller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/chmiiller"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/1013632?s=52&v=4" width="26" height="26" alt="@chmiiller" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/nour-s/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/nour-s"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/1418564?s=52&v=4" width="26" height="26" alt="@nour-s" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/psychedelicious/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/psychedelicious"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/4822129?s=52&v=4" width="26" height="26" alt="@psychedelicious" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/vzaidman/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/vzaidman"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/5188459?s=52&v=4" width="26" height="26" alt="@vzaidman" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/feimosi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/feimosi"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/5721520?s=52&v=4" width="26" height="26" alt="@feimosi" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/Hypnosphi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Hypnosphi"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/6651625?s=52&v=4" width="26" height="26" alt="@Hypnosphi" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/Nantris/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Nantris"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/6835891?s=52&v=4" width="26" height="26" alt="@Nantris" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/jmtimko5/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/jmtimko5"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/6867087?s=52&v=4" width="26" height="26" alt="@jmtimko5" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/DaleyKD/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/DaleyKD"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/7206282?s=52&v=4" width="26" height="26" alt="@DaleyKD" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/Xadoy/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Xadoy"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/9660951?s=52&v=4" width="26" height="26" alt="@Xadoy" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/DalderupMaurice/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/DalderupMaurice"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/10922045?s=52&v=4" width="26" height="26" alt="@DalderupMaurice" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/mkamalkayani/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mkamalkayani"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/17708588?s=52&v=4" width="26" height="26" alt="@mkamalkayani" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/karol-majewski/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/karol-majewski"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/20233319?s=52&v=4" width="26" height="26" alt="@karol-majewski" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/tomekzaw/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/tomekzaw"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/20516055?s=52&v=4" width="26" height="26" alt="@tomekzaw" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/mwskwong/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mwskwong"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/32725014?s=52&v=4" width="26" height="26" alt="@mwskwong" /> </a> <a class="participant-avatar" data-hovercard-type="user" data-hovercard-url="/users/mastrzyz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mastrzyz"> <img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/37447884?s=52&v=4" width="26" height="26" alt="@mastrzyz" /> </a> <span class="participation-more">and others</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </turbo-frame> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <span> © 2024 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>