TextField Input Delay

[deavac45]

I took the code below from the example codes. The link is as follows. I created a TextField. The TextField has no functionality. It only saves the inputs to the state. However, every time I type on the keyboard, there is a lag in the TextField area. I know that the place where I used the TextField is not the right place. But I couldn't find a suitable place for this TextField.

Code link: https://www.material-react-table.com/docs/examples/basic"

   const [text, setText] = useState('');
   const handleTextChange= (event) => {
	setText(event.target.value);
   };

.....

return (
		<>
			<MaterialReactTable table={table} />
			<TextField
				autoFocus
				margin="dense"
				label="text"
				fullWidth
				variant="outlined"
                                value={text}
                               onChange={handleTextChange}
			/>
		</>
	);
};

Full Code:

import { useMemo,useState} from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
} from 'material-react-table';
import TextField from "@mui/material/TextField";

//nested data is ok, see accessorKeys in ColumnDef below
const data = [
  {
    name: {
      firstName: 'John',
      lastName: 'Doe',
    },
    address: '261 Erdman Ford',
    city: 'East Daphne',
    state: 'Kentucky',
  },
  {
    name: {
      firstName: 'Jane',
      lastName: 'Doe',
    },
    address: '769 Dominic Grove',
    city: 'Columbus',
    state: 'Ohio',
  },
  {
    name: {
      firstName: 'Joe',
      lastName: 'Doe',
    },
    address: '566 Brakus Inlet',
    city: 'South Linda',
    state: 'West Virginia',
  },
  {
    name: {
      firstName: 'Kevin',
      lastName: 'Vandy',
    },
    address: '722 Emie Stream',
    city: 'Lincoln',
    state: 'Nebraska',
  },
  {
    name: {
      firstName: 'Joshua',
      lastName: 'Rolluffs',
    },
    address: '32188 Larkin Turnpike',
    city: 'Charleston',
    state: 'South Carolina',
  },
];

const Example = () => {
    const [text, setText] = useState('');
   const handleTextChange= (event) => {
	setText(event.target.value);
   };


  //should be memoized or stable
  const columns = useMemo(
    () => [
      {
        accessorKey: 'name.firstName', //access nested data with dot notation
        header: 'First Name',
        size: 150,
      },
      {
        accessorKey: 'name.lastName',
        header: 'Last Name',
        size: 150,
      },
      {
        accessorKey: 'address', //normal accessorKey
        header: 'Address',
        size: 200,
      },
      {
        accessorKey: 'city',
        header: 'City',
        size: 150,
      },
      {
        accessorKey: 'state',
        header: 'State',
        size: 150,
      },
    ],
    [],
  );

  const table = useMaterialReactTable({
    columns,
    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
  });

return (
		<>
			<MaterialReactTable table={table} />
			<TextField
				autoFocus
				margin="dense"
				label="text"
				fullWidth
				variant="outlined"
                                value={text}
                               onChange={handleTextChange}
			/>
		</>
	);
};

export default Example;

[SaberRajabi1990]

I have this problem too. Have you found a solution for it?
using MRT and Formik in a page causes delay in<TextField typing and make lag.

[KevinVandy]

Put it in a sandbox so I can actually debug it see what's going on

[SaberRajabi1990]

I created a public <FullMaterialTable component to use in another component. is it ok ? in the sandbox its work fine but in my project causes delay in<TextField typing and make lag. It`s weird .

https://codesandbox.io/p/sandbox/materialreacttableandformik-vy4l5f