Skip to main content
SimilarExport ZIP
100%

Gist 782553a6e275e4bfc694a6a3a6d1a46f

✓ Published0🌍 Public
HHuyAms
Last edited Sep 10, 2019
Created on Sep 10, 2019

This example demonstrates how the React `useRef` hook preserves a mutable value across re-renders, unlike the `createRef` API, which creates a new ref each render. It visually compares the two by displaying the current render index alongside the persisted value from `useRef` and the reset value from `createRef` after a button click triggers a state update. The code uses `React.useState` to drive re-renders and `React.useRef` to hold a stable reference, while `createRef` shows its transient nature. The example also uses `useEffect` with a custom comparison to illustrate deep object dependency handling, referencing the React documentation.

AI-generated description

Similar vizzes

Loading thumbnail…

React Starter

A minimal React starter demonstrates the difference between a current state value and the value rendered one frame earlier. The application uses React’s `useState` to hold an initial count of 20, and `useRef` combined with `useEffect` to store the previous count after each render. It displays both numbers in an `h1` element. The example loads React and ReactDOM from unpkg CDN, renders via `ReactDOM.render`, and tracks the previous value by updating a ref inside a side-effecting hook, showing a simple state-update pattern without external data.

NNita
76% match
Loading thumbnail…

React Starter

This example demonstrates a React component that displays the current value of a counter alongside the value from the previous render using the `useState`, `useRef`, and `useEffect` hooks. The code uses React’s `ReactDOM.render` to mount the component into the `#root` element defined in `index.html`. A custom `prevCountRef` stores the value from the previous state update, which is then displayed in the header. The counter starts at 20 and shows the before/after values on each render.

NNita
68% match
Loading thumbnail…

[01] The Basics - Using React Hooks with D3

This example demonstrates how to combine React Hooks with D3 to render and update a simple SVG scatterplot. A `useState` hook manages an array of numeric data, while a `useRef` hook and `useEffect` hook initialize an SVG canvas using `d3.select` from D3 v5. Circles are appended via `selectAll(...).data(...).join('circle')`, with radius and position derived from each value. Clicking the “Update” button increments the data by 5, and “Filter” removes values over 35, triggering a re-render through React’s state changes.

Ggjonor
64% match
Loading thumbnail…

React State Hook example

This example demonstrates a minimal React component that uses the `useState` hook from React 17 to track and display a numeric click counter. It renders a button and a paragraph showing how many times the button has been clicked, with each click updating the state and re-rendering the component. Built with ReactDOM rendering into a root div, the visualization uses `d3.v7` for potential data manipulation but does not directly call any d3 functions. The code shows a simple state-driven interaction rather than a graphical chart.

MMichael
63% match
Loading thumbnail…

useEffect

This example demonstrates the React useEffect hook by showing how a web application responds to user-triggered state changes. Three buttons—Posts, Users, and Comments—update a resource type displayed as a header, while the hook logs lifecycle events to the console on mount, on resource change, and during cleanup. The code uses React 16.9.0 with the useState and useEffect APIs directly from the React and ReactDOM UMD builds, and it renders the interface into a root div using ReactDOM.render.

RRichard Burd
63% match
Loading thumbnail…

ReactSimple

This example demonstrates a simple interactive web app using React to track click counts on a page. It shows two buttons and a text block that display the number of times they have been clicked, with the app state managed through React’s `useState` and event handlers like `onClick` and `onContextMenu`. The code uses React 16.9 and ReactDOM to render SVG elements, and it includes a reference to a D3-loaded CSV dataset from a GitHub gist, though the dataset is not visualized in the current interaction.

SShane Carey
63% match
Loading thumbnail…

Bats plus React useMemo

This example shows how React useMemo controls component re-rendering in a data visualization of bat icons moving across a screen. Six bat elements are rendered from an array of bat data objects, with each bat displaying its name and position. The app uses React's useState, useEffect, useRef, and useMemo hooks to isolate updates so only the bat whose data changes moves, while others remain static. A performance timer measures blocking computations from the intensive.js module, and the interface includes a table of bat data and a reset button. The visualization demonstrates that useMemo prevents unnecessary re-renders when dependencies remain unchanged.

Bbrandon flowers
63% match
Loading thumbnail…

Basic React Hook Test (Circles - Fixed Data)

This example demonstrates how React hooks can manage D3-driven SVG circle updates with fixed data. The app initializes an array of seven values, rendering each as a grey circle with a blue stroke, positioned via attributes calculated from the data. Two buttons trigger state changes: “Update Data” adds five to every value, while “Filter Data” removes values above 35, causing D3’s join method to add, remove, or update circles accordingly. The code uses the `useRef`, `useState`, and `useEffect` hooks, alongside `d3.select` and `.join()`, with React 16.12 and D3 v5.

TTom-S82
63% match