I need help with React-table.
I have a table that has rows with custom components (Select components and editable input).
When I change the Select/editable input the whole table is re-rendering .
how can I prevent it from happened?
I try to wrap my custom components with React.memo but I did not success to handle the problem.
This is a link for sandbox
you can see in the console that if you change the input it renders everything.
P.S don't use the last column something doesn't work there (i copied it from my project)
thanks!
Related
The antd tables work well with Input components. I have been using the editable cell example at https://ant.design/components/table#components-table-demo-edit-cell and it works well with undo / redo functionality.
The Select / Options and Date Picker components however do not have any documentation in the context of a table that's hooked up to a state. I have gotten the Options / Date Picker to work but when implementing undo / redo logic, it looks like their state does not by default update like the Input fields. If you Google this, it is a tricky part of React in general to get these components to update automatically with state changes in a Form.
Is there an example of an antd table with select or date picker that's hooked up to state information?
I got the Select / Option to work correctly visually e.g. default states load correctly, depending on selection color changes etc. I can manipulate the data as needed. Similarly, got the Date Picker to work. However, where I am stuck is automatically tying state changes to update the components. I can probably do some crazy stuff like force render but before going that route wanted to check if there is a cleaner / better antd way of doing this.
I think you have to custom return to default Editable Cells like the following example url example
After wasting many hours on this, it looks like there is a bug in antd Forms. See this SO thread: React | Ant design select value not setting
In short, removed the Form.Item and everything works fine.
I have an React table that contains 20k+ rows and some of these rows contains editable fields. I e.g. have a number field in which I have a component where it is possible to +/- the value.
I have been using the Examples: Editable Data from react tables own page, where all data is stored in as useState and then on each update it is changed - this however performes very badly, as the re-render delays the value changes when clicking the + button multiple times. Is there a way to handle this better and maybe also keep the original data such that is it possible to do a "reset", such that I don't need to overwrite the entire dataset for the table.
I did some research on the topic and found that you could use react-virtualized.
React components for efficiently rendering large lists and tabular data
It seems that it would be perfect solution to your problem.
Whats very cool is that by default all react-virtualized components use shallowCompare to avoid re-rendering unless props or state has changed.
Hope this will be a good replacement for react-table
I'm trying to play an animation on dismounting of my component with exit attribute, but it doesn't work despite the presence of !
The input animation works fine but not the output one !
I guess I'm mismanaging the dismounting of my description which is displayed if the props data.show is true, boolean that I change at the click on the project, in short if someone can point me...
codesandbox
Thanks in advance
There are quite a few issues to cover in your code and suggest you first understand what triggers re-rendering in React.
By creating a new uuid key every time you change prop data, you are breaking the ability for React to know which components need to be rendered again so it re-renders them all - so it's always a new instance on AnimatePresence and no way for AnimatePresence to know there has been a change to the key or a change in mounting. Also make use of useCallback hooks when passing in functions to child components to avoid re-renders.
Move the state up to the parent, update the card key to a consistent value between renders, and don't update the entire props data just to expand/collapse.
See the updated sandbox
I suggest that you don’t animate multiple items inline within the same space like this as you will always have the remaining boxes jump a little, but that is another topic.
I'm using react-hooks. So there is a modal that pops up with a bunch of inputs (components) like text fields, drop-downs, date pickers and etc...
The problem is when some field is being edited, all my form components are being re-rendered and that makes my form very slow. I totally understand why it happens. However, I would like to find a way when I edit some input within my form, all other input fields (components) should stay "frozen" and not re-rendered. Otherwise, working with my form which has at least 20 input fields, would make the work very slow...
Your assistance is appreciated!
You can use Uncontrolled components. It doesn't use setState, so it won't be re-rendered when you type some input value. Then you can send everything when you submit your form.
Try using React.memo which is in some way an equivalent to shouldComponentUpdate
Check React.memo documentation
I use ant design table and I want to fix the height of table and add scroll when data is large
antd table demo
And I want when user scrolls to the bottom of the table, then more data is fetched from the server. But ant design table does not have the onScroll event, I cannot know when and where user scrolls to
I find these people having the same issue as me
antd gihub
and they suggest to use refs and I use this ref solution but it does not work
gist solution
Could you show me how to do it?
This issue should be resolved by two things:
Use scrollToFirstRowOnChange , it keeps position consistent after every re-render.
Add scroll event on the .ant-table-body.
You can use React Lazyload and wrap your components on frontend side. If you need backend lazy loading you can check this example: Node.js + MongoDB example and set the amount of data you need to distribute per page