{"id":13526958,"url":"https://github.com/Oblosys/react-lifecycle-visualizer","last_synced_at":"2025-04-01T08:30:47.802Z","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":1336,"open_issues_count":0,"forks_count":38,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-10-15T21:42:06.812Z","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":"2024-10-04T12:41: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,"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","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222074966,"owners_count":16926640,"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","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-08-01T06:01:38.354Z","updated_at":"2024-11-02T11:31:52.896Z","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":["JavaScript"],"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"}