{"id":15030611,"url":"https://github.com/oblosys/react-lifecycle-visualizer","last_synced_at":"2025-10-08T22:43:22.859Z","repository":{"id":31876121,"uuid":"130080150","full_name":"Oblosys/react-lifecycle-visualizer","owner":"Oblosys","description":"Real-time visualizer for React lifecycle methods","archived":false,"fork":false,"pushed_at":"2023-05-05T17:11:44.000Z","size":11976,"stargazers_count":1332,"open_issues_count":0,"forks_count":30,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-10-08T22:43:21.446Z","etag":null,"topics":["lifecycle-methods","react","reactjs","trace","visualizer"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/Oblosys/react-lifecycle-visualizer/tree/master/examples/parent-child-demo?file=/src/samples/New.js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Oblosys.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-04-18T15:04:10.000Z","updated_at":"2025-09-09T18:53:45.000Z","dependencies_parsed_at":"2023-01-14T19:59:08.064Z","dependency_job_id":"e16665db-4e41-43f6-bc0a-1418bfe8fb5a","html_url":"https://github.com/Oblosys/react-lifecycle-visualizer","commit_stats":{"total_commits":231,"total_committers":3,"mean_commits":77.0,"dds":0.02164502164502169,"last_synced_commit":"fd3dcfcfbb872bf5df005b14f67070db07107122"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/Oblosys/react-lifecycle-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Oblosys%2Freact-lifecycle-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Oblosys%2Freact-lifecycle-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Oblosys%2Freact-lifecycle-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Oblosys%2Freact-lifecycle-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Oblosys","download_url":"https://codeload.github.com/Oblosys/react-lifecycle-visualizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Oblosys%2Freact-lifecycle-visualizer/sbom","scorecard":{"id":103995,"data":{"date":"2025-08-11","repo":{"name":"github.com/Oblosys/react-lifecycle-visualizer","commit":"12fe1e627a46abf67255c643aa98a90ff1f9a94d"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/build-test.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":2,"reason":"dependency not pinned by hash detected -- score normalized to 2","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-test.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Oblosys/react-lifecycle-visualizer/build-test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-test.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/Oblosys/react-lifecycle-visualizer/build-test.yml/master?enable=pin","Warn: npmCommand not pinned by hash: scripts/tag-release.sh:39","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   1 out of   2 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"34 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-hpx4-r86g-5jrg","Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2","Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T10:44:49.946Z","repository_id":31876121,"created_at":"2025-08-15T10:44:49.946Z","updated_at":"2025-08-15T10:44:49.946Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000780,"owners_count":26082851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lifecycle-methods","react","reactjs","trace","visualizer"],"created_at":"2024-09-24T20:13:51.533Z","updated_at":"2025-10-08T22:43:22.838Z","avatar_url":"https://github.com/Oblosys.png","language":"JavaScript","readme":"# React Lifecycle Visualizer [![Npm version](https://img.shields.io/npm/v/react-lifecycle-visualizer.svg?style=flat)](https://www.npmjs.com/package/react-lifecycle-visualizer) [![Build status](https://img.shields.io/github/actions/workflow/status/Oblosys/react-lifecycle-visualizer/build-test.yml?branch=master)](https://github.com/Oblosys/react-lifecycle-visualizer/actions/workflows/build-test.yml?query=branch/master)\n\nAn npm package ([`react-lifecycle-visualizer`](https://www.npmjs.com/package/react-lifecycle-visualizer)) for tracing \u0026 visualizing lifecycle methods of React class components. (For function components and hooks, check out [`react-hook-tracer`](https://github.com/Oblosys/react-hook-tracer#readme) instead.)\n\nTo trace a component, apply the higher-order component `traceLifecycle` to it, and all its lifecycle-method calls will show up in a replayable log component. Additionally, traced components may include a `\u003cthis.props.LifecyclePanel/\u003e` element in their rendering to show a panel with lifecycle methods, which are highlighted when the corresponding log entry is selected.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://codesandbox.io/s/github/Oblosys/react-lifecycle-visualizer/tree/master/examples/parent-child-demo?file=/src/samples/New.js\"\u003e\n    \u003cimg\n      alt=\"Parent-child demo\"\n      src=\"https://raw.githubusercontent.com/Oblosys/asset-storage/react-lifecycle-visualizer/images/parent-child-demo.gif\"\n      width=\"692\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Usage\n\nThe easiest way to get started is to\n open the [CodeSandbox playground](https://codesandbox.io/s/github/Oblosys/react-lifecycle-visualizer/tree/master/examples/parent-child-demo?file=/src/samples/New.js) and edit the sample components in `src/samples`. (For a better view of the log, press the 'Open in New Window' button in the top-right corner.)\n\nThe panel shows the new React 16.3 lifecycle methods, unless the component defines at least one legacy method and no new methods. On a component that has both legacy and new methods, React ignores the legacy methods, so the panel shows the new methods.\n\nThough technically not lifecycle methods, `setState` \u0026 `render` are also traced. A single `setState(update, [callback])` call may generate up to three log entries:\n\n  1. `'setState'` for the call itself.\n  2. If `update` is a function instead of an object, `'setState:update fn'` is logged when that function is evaluated.\n  3. If a `callback` function is provided, `'setState:callback'` is logged when it's called.\n\nTo save space, the lifecycle panel only contains `setState`, which gets highlighted on any of the three events above.\n\n\n## Run the demo locally\n\nTo run a local copy of the CodeSandbox demo, simply clone the repo, and run `npm install` \u0026 `npm start`:\n\n```\ngit clone git@github.com:Oblosys/react-lifecycle-visualizer.git\ncd react-lifecycle-visualizer\nnpm install\nnpm start\n```\n\nThe demo runs on http://localhost:8000/.\n\n\n## Using the npm package\n\n```sh\n$ npm i react-lifecycle-visualizer\n```\n\n#### Setup\n\nTo set up tracing, wrap the root or some other ancestor component in a `\u003cVisualizerProvider\u003e` and include the `\u003cLog/\u003e` component somewhere. For example:\n\n```jsx\nimport { Log, VisualizerProvider } from 'react-lifecycle-visualizer';\n\nReactDom.render(\n  \u003cVisualizerProvider\u003e\n    \u003cdiv style={{display: 'flex'}}\u003e\n      \u003cApp/\u003e\n      \u003cLog/\u003e\n    \u003c/div\u003e\n  \u003c/VisualizerProvider\u003e,\n  document.getElementById('root')\n);\n```\n\nIf you're using a WebPack dev-server with hot reloading, you can include a call to `resetInstanceIdCounters` in the module where you set up hot reloading:\n\n```jsx\nimport { resetInstanceIdCounters } from 'react-lifecycle-visualizer';\n..\nresetInstanceIdCounters(); // reset instance counters on hot reload\n..\n```\n\nThis isn't strictly necessary, but without it, instance counters will keep increasing on each hot reload, making the log less readable.\n\n#### Tracing components\n\nTo trace a component (e.g. `ComponentToTrace`,) apply the `traceLifecycle` HOC to it. This is most easily done with a decorator.\n\n```jsx\nimport { traceLifecycle } from 'react-lifecycle-visualizer';\n..\n@traceLifecycle\nclass ComponentToTrace extends React.Component {\n  ..\n  render() {\n    return (\n      ..\n      \u003cthis.props.LifecyclePanel/\u003e\n      ..\n    );\n  }\n}\n```\n\nAlternatively, apply `traceLifecycle` directly to the class, like this:\n\n```jsx\nconst ComponentToTrace = traceLifecycle(class ComponentToTrace extends React.Component {...});\n```\n\nor\n\n```jsx\nclass ComponentToTraceOrg extends React.Component {...}\nconst ComponentToTrace = traceLifecycle(ComponentToTraceOrg);\n```\n\n#### Traced component props: `LifecyclePanel` and `trace`\n\nThe traced component receives two additional props: `LifecyclePanel` and `trace`. The `LifecyclePanel` prop is a component that can be included in the rendering with `\u003cthis.props.LifecyclePanel/\u003e` to display the lifecycle methods of the traced component.\n\n```jsx\nrender() {\n  return (\n    ..\n    \u003cthis.props.LifecyclePanel/\u003e\n    ..\n  );\n}\n```\n\nThe `trace` prop is a function of type `(msg: string) =\u003e void` that can be used to log custom messages:\n\n```jsx\ncomponentDidUpdate(prevProps, prevState) {\n  this.props.trace('prevProps: ' + JSON.stringify(prevProps));\n}\n```\n\nIn the constructor we can use `this.props.trace` after the call to `super`, or access `trace` on the `props` parameter:\n\n```jsx\nconstructor(props) {\n  props.trace('before super(props)');\n  super(props);\n  this.props.trace('after super(props)');\n}\n```\n\nIn the static `getDerivedStateFromProps` we cannot use `this` to refer to the component instance, but we can access `trace` on the `nextProps` parameter:\n\n```jsx\nstatic getDerivedStateFromProps(nextProps, prevState) {\n    nextProps.trace('nextProps: ' + JSON.stringify(nextProps));\n    ..\n}\n```\n\n## TypeScript\n\nThere's no need to install additional TypeScript typings, as these are already included in the package. The interface `TraceProps` declares the `trace` and `LifecyclePanel` props. Its definition is\n\n```typescript\nexport interface TraceProps {\n  trace: (msg: string) =\u003e void,\n  LifecyclePanel : React.SFC\n}\n```\n\nWith the exception of tracing a component, the TypeScript setup is the same as the JavaScript setup above. Here's an example of a traced component in TypeScript:\n\n\u003c!-- GitHub doesn't recognize ```tsx --\u003e\n```jsx\nimport { traceLifecycle, TraceProps } from 'react-lifecycle-visualizer';\n..\ninterface ComponentToTraceProps extends TraceProps {}; // add trace \u0026 LifecyclePanel props\ninterface ComponentToTraceState {}\n\nclass ComponentToTrace extends React.Component\u003cComponentToTraceProps, ComponentToTraceState\u003e {\n  constructor(props: ComponentToTraceProps, context?: any) {\n    props.trace('before super(props)');\n    super(props, context);\n    this.props.trace('after super(props)');\n  }\n\n  static getDerivedStateFromProps(nextProps : ComponentToTraceProps, nextState: ComponentToTraceState) {\n    nextProps.trace('deriving');\n    return null;\n  }\n\n  render() {\n    return \u003cthis.props.LifecyclePanel/\u003e;\n  }\n}\n\n```\n\nThe only difference is that we cannot use `traceLifecycle` as a decorator in TypeScript, because it changes the signature of the parameter class (see this [issue](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796)). Instead, we simply apply it as a function:\n\n```tsx\nconst TracedComponent = traceLifecycle(ComponentToTrace);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblosys%2Freact-lifecycle-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foblosys%2Freact-lifecycle-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foblosys%2Freact-lifecycle-visualizer/lists"}