Bats plus React useMemo

100%

Bats plus React useMemo

✓ Published0🌍 Public

Last edited Mar 5, 2020

Created on Mar 4, 2020

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.

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 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

81% 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

66% match

Loading thumbnail…

useState

A React counter demonstrates the `useState` hook for managing numeric state, with buttons that increment and decrement a displayed number. The code uses functional updates to avoid stale closures and shows how initial state can be provided either directly or lazily via a function, logging console messages to illustrate when each initialization runs. Rendering uses `ReactDOM.render` into a root div, with the interface styled by large CSS font sizes.

RRichard Burd

66% 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

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

62% match

Loading thumbnail…

React Hooks Starter

A React Hooks starter demonstrates a counter that adds or removes apple emojis in a grid layout. The interface uses `React.useState` to manage the current message and status text, while `React.useReducer` handles increment and decrement actions on an initial count of 24. `React.useEffect` updates the status message after the tree mounts, and `React.useRef` holds a reference to the main div. The code imports React, ReactDOM, and a CSS file, then renders the entire component with `ReactDOM.render`.

Ttanvee gujral

61% match

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that calculates and displays the squares of the numbers 1 through 5. The page renders the resulting array of squared values as a single text string, using ReactDOM to mount the component into the root div. The code also logs the value of square of 5 to the browser console, and includes an unused HTML element with red styling. It relies on the React 16.10.0 production library and renders through a bundled JavaScript file.

NNita

61% 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

60% match