odd or even large number with react window instead of web worker

React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks.

It reduces the amount of work (and time) required to render the initial view and to process updates.
It reduces the memory footprint by avoiding over-allocation of DOM nodes
First write input with ant design:

import PropTypes from "prop-types";
import React from "react";
import { Input as InputBase } from "antd";
import { Controller, useController } from "react-hook-form";
import classNames from "classnames";

const Input = ({
  name,
  value,
  message,
  control,
  register,
  classes,
  label,
  absolute,
  ...rest
}) => {
  const {
    field,
    fieldState: { error },
  } = useController({
    name,
    control,
    rules: register,
    defaultValue: value,
  });
  return (
    <div
      className={classNames("input", {
        input__absolute: absolute,
      })}
    >
      {label ? <label className="input__label">{label} :</label> : null}
      <InputBase
        className={classNames("input__field", [classes], {
          input__error: error,
        })}
        {...field}
        {...rest}
      />
      {error && <span className="input__message">{error.message}</span>}
    </div>
  );
};

Input.propTypes = {
  classes: PropTypes.any,
  control: PropTypes.any,
  errors: PropTypes.any,
  label: PropTypes.string,
  message: PropTypes.string,
  name: PropTypes.string,
  register: PropTypes.any,
  value: PropTypes.any,
};
export default Input;

then make button component

import PropTypes from "prop-types";
import React from "react";
import { Button as ButtonBase } from "antd";
import classNames from "classnames";

const Button = ({
  type,
  classes,
  large,
  success,
  disabled,
  children,
  ...rest
}) => {
  return (
    <ButtonBase
      type={type}
      className={classNames(`button button__${type}`, [classes], {
        large: large,
        success: success,
        disabled: disabled,
      })}
      disabled={disabled}
      {...rest}
    >
      {children}
    </ButtonBase>
  );
};
Button.defaultProps = {
  type: "default",
  large: false,
  success: false,
  disabled: false,
};

Button.propTypes = {
  children: PropTypes.node.isRequired,
  classes: PropTypes.string,
  large: PropTypes.bool,
  ico: PropTypes.bool,
  success: PropTypes.bool,
  disabled: PropTypes.bool,
  type: PropTypes.oneOfType(
    [PropTypes.oneOf(["primary", "default", "text", "gradient"])],
    PropTypes.string.isRequired
  ),
};
export default Button;

then use these codes to take data from the user:

      <form onSubmit={handleSubmit(onSubmit)} className="Home__formBox">
        <Input
          label="عدد"
          register={{
            required: {
              value: true,
              message: "Enter the number",
            },
          }}
          type="number"
          name="data"
          control={control}
        />
        <Button
          type="primary"
          classes="MasterSignUp__btn"
          htmlType="submit"
          disabled={loading ? true : false}
        >
          {loading ? "sending..." : "send"}
        </Button>
      </form>

then write shape component to check if the number is odd or even, show circle or square


import React, { useEffect, useState } from "react";
import { FixedSizeGrid as Grid } from "react-window";
import InfiniteLoader from "react-window-infinite-loader";

const Shapes = ({ loadMore, number }) => {
  const Row = ({ index, style }) => (
    <div className={"circles"} style={style}></div>
  );
  const Row1 = ({ index, style }) => (
    <div className={"squares"} style={style}></div>
  );
  const [type, setType] = useState("");
  useEffect(() => {
    if (number % 2 == 0) {
      setType(true); //even
    } else {
      setType(false); //odd
    }
  }, [number]);
  const LOADING = 1;
  const LOADED = 2;
  let itemStatusMap = {};
  const isItemLoaded = (index) => !!itemStatusMap[index];
  const loadMoreItems = (startIndex, stopIndex) => {
    for (let index = startIndex; index <= stopIndex; index++) {
      itemStatusMap[index] = LOADING;
    }
    return new Promise((resolve) =>
      setTimeout(() => {
        for (let index = startIndex; index <= stopIndex; index++) {
          itemStatusMap[index] = LOADED;
        }
        resolve();
      }, 2500)
    );
  };
  return (
    <InfiniteLoader
      isItemLoaded={(index) => index < number}
      itemCount={number}
      loadMoreItems={loadMoreItems}
    >
      {({ onItemsRendered, ref }) => (
        <Grid
          columnCount={number / 10}
          columnWidth={40}
          rowCount={number}
          rowHeight={25}
          height={800}
          width={800}
          itemSize={50}
          onItemsRendered={onItemsRendered}
          ref={ref}
          className="Shapes"
        >
          {type ? Row : Row1}
        </Grid>
      )}
    </InfiniteLoader>
  );
};

export default Shapes;

then update the home page with this component:

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import Input from "./Input";
import Button from "./Button";
import Shapes from "./Shapes";

function Index() {
  const [loading, setLoading] = useState(false);
  const [number, setNumber] = useState(0);
  const {
    handleSubmit,
    control,
    register,
    reset,
    formState: { errors, isSubmitted },
  } = useForm();
  const onSubmit = (data) => {
    // setLoading(true);
    setNumber(data.data);
  };
  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)} className="Home__formBox">
        <Input
          label="number"
          register={{
            required: {
              value: true,
              message: "enter number",
            },
          }}
          type="number"
          name="data"
          control={control}
        />
        <Button
          type="primary"
          classes="MasterSignUp__btn"
          htmlType="submit"
          disabled={loading ? true : false}
        >
          {loading ? "sending..." : "send"}
        </Button>
      </form>
      <Shapes number={number} setLoading={setLoading} />
    </div>
  );
}

export default Index;

Blog

odd or even large number with react window instead of web worker

Saba beigi

Join Our Newsletter. No Spam, Only the good stuff.

Related