/react-state-management/

[panzerdp]

Written on 03/02/2020 13:10:47

URL: https://dmitripavlutin.com/react-state-management/

[panzerdp]

Comment written by Lewis Llobera on 03/14/2020 16:01:00

Nice article, I really learned. I've noticed an error in the point 2: in the code example, the function to add a name is called `handleAdd`, but in the text is referred to as `addNewProduct`.

[panzerdp]

Comment written by Dmitri Pavlutin on 03/15/2020 15:25:14

Thank you @lewisllobera:disqus. The typos have been fixed.

[rvadimn]

Thank you, very useful article! One more typo in the next line ---> return state.filter(name => name === action.name); I think it should be '!==', isn't it? Thank you for the share your knowledge!

[AlexKuznietsov]

Nice article, but there is one important issue to mention about compound states splitting. React uses Batch Update mechanics when you update multiple state variables in a row. It prevents excessive rerenders of dependent component (does not trigger rerender after every call of each useState updater). But it doesn't work in async functions (common scenario is to fetch data asynchronously from rest api and make complex updates after). So calling multiple setters in async function results in repeating rerenders pitfall. Combining state variables into a compound state object allows to perform update with one call only, solving unwanted rerenders problem.

[nabtron]

the filter logic for delete should check for not equal to. From: case 'delete': return state.filter(name => name === action.name); to: case 'delete': return state.filter(name => name !== action.name);

[panzerdp]

the filter logic for delete should check for not equal to. From: case 'delete': return state.filter(name => name === action.name); to: case 'delete': return state.filter(name => name !== action.name);

Fixed!

[VictorJozwicki]

[...new Set([...state, action.name])] You create an array with new Set even though [...state, action.name] creates one already and you're respreading it in another array ?

That's like writing [...[...[...state, action.name]]], you just need [...state, action.name]