Theo's Typesafe Cult•12mo ago

Help needed handling 1k react checkboxes

if I have a state of arrays that has all the selected users id and I have 1000 users and when a user is selected there is lag how would I handle that my current handleUserSelected code:

function handleUserSelected(value: string) {
    const currentIndex = selectedUsers.indexOf(value);
    const newSelected = [...selectedUsers];

    if (currentIndex === -1) {
      newSelected.push(value);
    } else {
      newSelected.splice(currentIndex, 1);
    }

    setSelectedUsers(newSelected);
  }

function handleUserSelected(value: string) {
    const currentIndex = selectedUsers.indexOf(value);
    const newSelected = [...selectedUsers];

    if (currentIndex === -1) {
      newSelected.push(value);
    } else {
      newSelected.splice(currentIndex, 1);
    }

    setSelectedUsers(newSelected);
  }

13 Replies

Neto•12mo ago

useMemo if you are doing a heavy rendering, you can try to use millionjs

Neto•12mo ago

https://million.dev/docs

Million.js

The Virtual DOM Replacement for React

Neto•12mo ago

https://www.youtube.com/watch?v=x-aNifu9RNw

Jack Herrington

YouTube

Single Line React Performance Boost with Million

Turbo charge your React application with the new block rendering engine in Million. Code: https://github.com/jherr/million-rainbow/blob/main/src/App.tsx Liminal: https://www.liminal.sh/

Neto•12mo ago

https://www.youtube.com/watch?v=VkezQMb1DHw

Fireship

YouTube

High-school student makes React a million times faster

Million.js is a React library that can improve rendering performance by bypassing the virtual DOM. It is inspired by blockdom and other popular JavaScript frameworks like Solid and Svelte #javascript #programming #thecodereport 💬 Chat with Me on Discord https://discord.gg/fireship 🔗 Resources Million on GitHub https://github.com/aidenybai/...

Thund3rd3v•12mo ago

lol I saw milion a while ago ill have to try memo if I use useMemo how would I pass down value: string that comes from the component checkbox yeah i also tried million it does not work faster well it prob does but the state chanes still take alot of time

oadster•12mo ago

If there is a 1000 checkboxes at once it is very unlikely that the user needs to see 1000 on the page at once. You can use virtualization to only show a portion at a time I found an example with checkboxes that may help

oadster•12mo ago

https://github.com/emilebres/react-virtualized-checkbox

GitHub

GitHub - emilebres/react-virtualized-checkbox: Checkbox group compo...

Checkbox group component with virtualization for large number of options - GitHub - emilebres/react-virtualized-checkbox: Checkbox group component with virtualization for large number of options

oadster•12mo ago

https://github.com/bvaughn/react-virtualized

GitHub

GitHub - bvaughn/react-virtualized: React components for efficientl...

React components for efficiently rendering large lists and tabular data - GitHub - bvaughn/react-virtualized: React components for efficiently rendering large lists and tabular data

oadster•12mo ago

But you are pretty much looking for a virtualized list or something similiar https://emilebres.github.io/react-virtualized-checkbox/

Thund3rd3v•12mo ago

I’ll check it out thanks

Brendonovich•12mo ago

imo the obvious solution is just throw tanstack virtual into your list renderer and call it a day https://tanstack.com/virtual/v3/docs/guide/introduction

Introduction | TanStack Table Docs

TanStack Virtual is a headless UI utility for virtualizing long lists of elements in JS/TS, React, Vue, Svelte and Solid. It is not a component therefore does not ship with or render any markup or styles for you. While this requires a bit of markup and styles from you, you will retain 100% control over your styles, design and implementation. T...

Brendonovich•12mo ago

if u want some further optimisation i'd store the selected state in a set instead of an array, u just gotta be careful around immutability with that

Thund3rd3v•12mo ago

ima try virtualation lets see It worked thanks

Gaming

Programming

Help needed handling 1k react checkboxes