Bats plus React useMemo

100%

Bats plus React useMemo

✓ Published1🌍 Public

Last edited Mar 3, 2020

Created on Mar 1, 2020

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.

AI-generated description

Experiment with React useMemo

With useMemo, the components will only get updated if their data changes. In this case, the data is an array. If useMemo takes in this array, all the bats will update on a change instead of the desired one bat.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bats plus React useMemo

This example demonstrates how React’s `useMemo` hook caches expensive computations, affecting performance when a counter increments. It displays a number `I` that increases on button click, alongside calculated prime numbers and the time taken to compute them. The code uses `React.useState` and `React.useMemo` within a functional component, and a custom `doPointlessComputationsWithBlocking` function from intensive.js performs blocking prime-number calculations. The `useMemo` dependency array is empty, so the heavy computation runs once on initial render, highlighting how memoization prevents repeated work during subsequent state updates.

Ttanvee gujral

81% match

Loading thumbnail…

lets try a bat chart

This visualization presents the top 10 most populous countries as oversized bat symbols rendered in a React component, with each bat’s size proportional to population data from the United Nations World Population Prospects 2019. The chart deliberately omits axes; instead, it uses d3.csv to load the data and d3.scaleLinear to map populations to bat dimensions. The bats are drawn using SVG paths created by d3.symbol and d3.path, and the layout is managed through React’s state and props, with each bat positioned using d3.layout.forceSimulation for a staggered, organic arrangement.

Aayonghosh2003

67% match

Loading thumbnail…

Dataviz 2020_Ep14 - 8. Interaction With React - useState hook, useCallback - Mouse Follower

A React-based SVG visualization renders a single circle at the center of a 960 by 500 canvas. The circle follows the mouse cursor in real time as the user moves it across the screen, using the `useState` hook to store the cursor’s x and y coordinates and the `useCallback` hook to handle the `onMouseMove` event. The React component updates the circle’s `cx` and `cy` attributes directly, with D3 v6 loaded but not used for this interaction. No external data is involved; the graphic demonstrates state-driven rendering and event handling in React.

MMinwoo Pak

64% match

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

64% 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…

React Hooks Starter

A React Hooks demonstration shows a grid of apple emoji whose count starts at 24 and adjusts with plus/minus buttons. The `Tree` component uses `React.useReducer` to manage the count state, while `React.useEffect` tracks mounting and updates a status message. Each apple renders through a separate `Apple` component that sets a message via `React.useState`. The code uses React 16.10 UMD builds and plain CSS for button styling, with the interactive behavior centered on toggling the reducer actions.

Bbrandon flowers

63% match

Loading thumbnail…

Gist 782553a6e275e4bfc694a6a3a6d1a46f

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.

HHuyAms

63% match

Loading thumbnail…

React refactoring

This example presents a COVID-19 dashboard built with React and D3 that fetches summary data from the covid19api.com API. Users load global or per-country statistics, which render as animated bar charts comparing new and total confirmed cases, deaths, and recoveries. The interface includes a navigation bar and country selector, both populated dynamically using D3 selections. Charts are drawn with D3 scales and axes, while React components manage state and lifecycle, with the d3.axisBottom, d3.axisLeft, and transition methods handling axis rendering and bar animations.

0007ebey

63% match