# Oblosys/react-lifecycle-visualizer

Real-time visualizer for React lifecycle methods

Repository: https://github.com/Oblosys/react-lifecycle-visualizer
Canonical: https://ross.abutalabs.com/products/react-lifecycle-visualizer
Homepage: https://codesandbox.io/s/github/Oblosys/react-lifecycle-visualizer/tree/master/examples/parent-child-demo?file=/src/samples/New.js
Language: JavaScript
License: MIT
License Family: permissive
Topics: reactjs, lifecycle-methods, visualizer, trace, react
Last push: 2023-05-05T17:11:44+00:00

## Health v2 (maintenance only)
Score: 23/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 0, release rhythm 8, longevity 100
- inputs: {"age_days": 3059, "days_push": 1216, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1325, forks 30 (observed 2026-08-28T04:04:22.620033+00:00)

## What it is
An npm package that traces and visualizes React class component lifecycle methods in real time via a traceLifecycle higher-order component and a replayable log panel. It also traces setState and render calls, highlighting entries in a lifecycle panel.

## Use cases
- visualize react lifecycle methods in real time
- trace which lifecycle methods run and when
- debug component mounting and unmounting order
- teach or learn the react component lifecycle
- replay a log of lifecycle method calls
- see setState and render calls interleaved with lifecycle events

## When to choose
- you work with React class components and want to understand or debug their lifecycle behavior
- you are teaching or learning how React lifecycle methods fire
- you need a replayable trace of lifecycle, setState, and render calls

## When to avoid
- your codebase uses function components and hooks - use react-hook-tracer instead
- you need production performance profiling rather than educational tracing
- you need a general-purpose React devtools replacement

## Facets
- artifact type: library
- maturity: maintenance
- function: developer-tools
- domain: frontend, web-development, developer-tools
- platform: browser
- tags: react, lifecycle-methods, tracing, visualization, higher-order-component, debugging, nodejs, web-server

## Member repositories
- Oblosys/react-lifecycle-visualizer (main) score 23

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:04:22.620033+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T04:46:25.478681+00:00, confidence not recorded.
  - readme: https://github.com/Oblosys/react-lifecycle-visualizer (fetched 2026-08-28T04:04:22.620033+00:00, sha 62c374b0d8f5)
  - registry_npm: https://registry.npmjs.org/react-lifecycle-visualizer (fetched 2026-08-29T12:05:42.060444+00:00, sha da00a67b0b60)
- Data as of 2026-08-30T08:39:29.467469+00:00.