belisarith / jammming Goto Github PK

https://github.com/Belisarith/jammming/blob/master/src/Components/App/App.js#L71

This is a nice way to create a copy of the state so that you don't have to mutate it directly.

When you write some code like

let someArray = this.state.someProperty;
someArray.push();

You are directly mutating React's state, which is considered a bad practice. React's state should only be changed by this.setState() because this method in turn signals to React that a component needs to be re-rendered. Directly mutating the state does not, which can cause complications.

Consider using a non-mutating Array method instead, like slice, concat, map, or filter which all return a brand new array instead.

Read more about immutability in React here.

https://github.com/Belisarith/jammming/blob/master/src/Components/App/App.js#L86-L93

Nice touch remembering that .savePlaylist returns a Promise and using .then to reset the Playlist's state after the Promise is resolved.

https://github.com/Belisarith/jammming/blob/master/src/Components/App/App.js#L64-L67

This is an interesting way to check if a track has been added to the playlist previously and definitely gets the job done, but it's not the most efficient. By definition, the every() method checks every element in an array and determines every element meets some condition.

In reality, you don't need to check every single element. If you find a single element with the matching track id, that's enough to know that you shouldn't add the new track. You don't need to continue checking the IDs of all the other tracks after that.

Could you use any other Array methods to accomplish this that may be more efficient? One method that comes to mind is .some(), which merely checks if any element in the array meets the condition.

if (this.state.playlistTracks.some(_track => _track.id === track.id))

Satisfactory 👍

First of all, good job getting this project to work! It's a smooth experience to clone and start your project, get started searching for songs, adding them to playlists and finally adding those playlists to an actual account. This was no small feat, good job!

Make sure to look through the API documentation and start thinking of other features that you can add to your web application. As long as you can break a user interface down to components and reason about the state that describes those components, you should be able to use React to build your ideas!