Add and Live Search items with React Hooks

The useful snippet with the newest React hooks.



QUICK learning notebooks


add items with add button

live search all items

two input tags for typing, an add button to submit, and the list showing all items


store data in arrays with useState(),

new item input held in with useRef()

add the input text when submitting the item.

the value is inputRef.current.value, store the item value in the items array if not null, and empty the input after submitting


live search is working with onChange()

change the query array based on the value.

Show the filtered items according to the new array

useMemo() to memorize the data for now and fasten the process. When the items or query change, run it.




❤️Front-end Web Development self-taught *share what I learned*