Let's build a search bar in React!

Tim Smith on September 11, 2018

The original version of this article can be found here. I know, I know...another task app... Hear me out though! We are going to build a task a... [Read Full]
markdown guide

Thanks for the article.

You addItem/removeItem has a fairly unlikely race condition in it.

You are reading the list from the state, modifying it, then using this.setState. However, this.setState does not update the state immediately.

In theory, addItem could get called twice in quick succession, and you would lose one of the items added. For example with this possible ordering of events:

  • Initial List ["a", "b", "c"]
  • addItem Called with "d", modified list ["a", "b", "c", "d"], setState called
  • addItem called with "e", modified list ["a", "b", "c", "e"], setState called
  • State is updated with ["a", "b", "c", "d"]
  • State is updated with ["a", "b", "c", "e"]

Just something to keep in mind.


Interesting. How would you suggest preventing that issue in a project like this?


Use call back format for setState.

this.setState(state => {
  const list = state.list;
  /* modify list */;
  return {
    list: modifiedList

Great tutorial, but why not use facebook cra instead ?


If cra is your choice, you can try c-r-a-p 💩-create-react-app-parcel 😃


I have not heard of this. It looks cool though. Thanks for the link!


It’s really personal preference, but to be honest I haven’t used create-react-app in a while and forgot it existed.


At the end It's better to make it your own way. create-react-app is for fast dev or examples but not for real projects.

That's not necessarily true. I know plenty of enterprit level projects that use React that were created with CRA. As long as you configure and secure it, it's the best solution for making a start on a React project.

I couldn't disagree with this more. In a majority of cases you don't need any additional configuration.


Nice Article.

When I use getDerivedStateFromProps() in same way you use componentWillReceiveProps() in List component searching doesn't work.

static getDerivedStateFromProps(nextProps) {
return {
filtered: nextProps.items

I didn't know that getDerivedStateFromProps is called every time we setState(). Link for lifecycles projects.wojtekmaj.pl/react-lifecy....

I wanted to share this thought with you cause I didn't give enough attention about differences between componentWillReceiveProps and getDerivedStateFromProps and IMHO this is kind of important.


"Fair warning: This part may get a bit abstract, so do your best to stick with me. If I don't explain well enough or you're struggling with it, leave a comment and I'll try to help you get it." ~ T. Smith

I love the generous spirit and the acknowledgement that sometimes what we think we're say/writing is not what is heard/understood.


There's a typo: mkdir search-tasks && $_ should be mkdir search-tasks && cd $_


Thanks for the article.

FYI, I don't see the instructions to modify the package.json to include the start script.


Thanks! I have added the piece about scripts in the package.json file.


Hi Tim,

I found typo error at Next we need to install the necessary packages to our package. => Next we need to install the necessary packages to our project


Corrected. Good catch. It sounded like I was trying to be xhibit or something.


If you get an error when importing like --> import 'bulma/bulma' use --> import 'bulma/css/bulma.css'

code of conduct - report abuse