diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index f3fb62c3..231a5cb7 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -51,9 +51,7 @@ const Artist = ({
 
   useEffect(
     () => {
-      if (uri) {
-        loadArtist(uri, { full: true });
-      }
+      if (uri) loadArtist(uri, { full: true });
     },
     [uri],
   );
@@ -81,15 +79,13 @@ const Artist = ({
     playURIs(arrayOf('uri', tracks) || albums_uris, uri);
   }
 
-  const handleContextMenu = (e) => {
-    showContextMenu({
-      e,
-      context: 'artist',
-      items: [artist],
-      uris: [uri],
-      tracklist_uri: uri,
-    });
-  }
+  const handleContextMenu = (e) => showContextMenu({
+    e,
+    context: 'artist',
+    items: [artist],
+    uris: [uri],
+    tracklist_uri: uri,
+  });
 
   if (loading) {
     return <Loader body loading />;
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js
index 88b64d19..bc1d7d23 100755
--- a/src/js/views/Playlist.js
+++ b/src/js/views/Playlist.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import ErrorMessage from '../components/ErrorMessage';
@@ -20,7 +20,6 @@ import * as uiActions from '../services/ui/actions';
 import * as mopidyActions from '../services/mopidy/actions';
 import * as spotifyActions from '../services/spotify/actions';
 import { uriSource } from '../util/helpers';
-import { trackEvent } from '../components/Trackable';
 import { i18n, I18n } from '../locale';
 import { makeItemSelector, makeLoadingSelector, getSortSelector } from '../util/selectors';
 import { sortItems, applyFilter } from '../util/arrays';
@@ -28,126 +27,158 @@ import { decodeUri, encodeUri } from '../util/format';
 
 const SORT_KEY = 'playlist_tracks';
 
-class Playlist extends React.Component {
-  constructor(props) {
-    super(props);
+const Actions = ({
+  encodedUri,
+  playlist: {
+    uri,
+    can_edit,
+    name,
+    in_library,
+  },
+  onPlay,
+  handleContextMenu,
+}) => {
+  switch (uriSource(uri)) {
+    case 'm3u':
+      return (
+        <div className="actions">
+          <Button
+            type="primary"
+            onClick={onPlay}
+            tracking={{ category: 'Playlist', action: 'Play' }}
+          >
+            <I18n path="actions.play" />
+          </Button>
+          <Button
+            to={`/playlist/${encodedUri}/edit`}
+            tracking={{ category: 'Playlist', action: 'Edit' }}
+          >
+            <I18n path="actions.edit" />
+          </Button>
+          <PinButton item={{ uri, name }} />
+          <ContextMenuTrigger onTrigger={handleContextMenu} />
+        </div>
+      );
 
-    let { uri } = props;
+    case 'spotify':
+      if (can_edit) {
+        return (
+          <div className="actions">
+            <Button
+              type="primary"
+              onClick={onPlay}
+              tracking={{ category: 'Playlist', action: 'Play' }}
+            >
+              <I18n path="actions.play" />
+            </Button>
+            <Button
+              to={`/playlist/${encodedUri}/edit`}
+              tracking={{ category: 'Playlist', action: 'Edit' }}
+            >
+              <I18n path="actions.edit" />
+            </Button>
+            <PinButton item={{ uri, name }} />
+            <ContextMenuTrigger onTrigger={handleContextMenu} />
+          </div>
+        );
+      }
+      return (
+        <div className="actions">
+          <Button
+            type="primary"
+            onClick={onPlay}
+            tracking={{ category: 'Playlist', action: 'Play' }}
+          >
+            <I18n path="actions.play" />
+          </Button>
+          <FollowButton
+            uri={uri}
+            is_following={in_library}
+          />
+          <PinButton item={{ uri, name }} />
+          <ContextMenuTrigger onTrigger={handleContextMenu} />
+        </div>
+      );
 
-    this.state = {
-      filter: '',
-    };
+    default:
+      return (
+        <div className="actions">
+          <Button
+            type="primary"
+            onClick={onPlay}
+            tracking={{ category: 'Playlist', action: 'Play' }}
+          >
+            <I18n path="actions.play" />
+          </Button>
+          <PinButton item={{ uri, name }} />
+          <ContextMenuTrigger onTrigger={handleContextMenu} />
+        </div>
+      );
+  }
+}
 
-    // Spotify upgraded their playlists URI to remove user component (Sept 2018)
-    // We accept the old format, and redirect to the new one
-    if (uri.includes('spotify:user:')) {
-      uri = uri.replace(/spotify:user:([^:]*?):/i, 'spotify:');
-      props.history.push(`/playlist/${encodeUri(uri)}`);
+const Playlist = ({
+  loading,
+  loading_tracks,
+  slim_mode,
+  history,
+  uri,
+  encodedUri,
+  name,
+  playlist: playlistProp,
+  sortField,
+  sortReverse,
+  coreActions: {
+    loadPlaylist,
+    reorderPlaylistTracks,
+    removeTracksFromPlaylist,
+    addPinned,
+    removePinned,
+  },
+  uiActions: {
+    setSort,
+    setWindowTitle,
+    showContextMenu,
+    hideContextMenu,
+    createNotification,
+  },
+  mopidyActions: {
+    playPlaylist,
+  },
+}) => {
+  const [playlist, setPlaylist] = useState({});
+  const [filter, setFilter] = useState('');
+
+  useEffect(
+    () => {
+      if (uri) loadPlaylist(uri, { full: true, name });
+    },
+    [uri],
+  );
+
+  useEffect(() => {
+    if (playlistProp && playlist && playlistProp.moved_to !== playlist.moved_to) {
+      history.push(`/playlist/${encodeUri(playlistProp.moved_to)}`);
     }
-  }
+  }, [playlistProp])
 
-  componentDidMount() {
-    const {
-      coreActions: {
-        loadPlaylist,
-      },
-      uri,
-      name,
-    } = this.props;
-    this.setWindowTitle();
-    setTimeout(() => loadPlaylist(uri, { full: true, name }), 1);
-  }
-
-  componentDidUpdate = ({
-    uri: prevUri,
-    playlist: prevPlaylist,
-  }) => {
-    const {
-      uri,
-      name,
-      playlist,
-      coreActions: {
-        loadPlaylist,
-      },
-      history: {
-        push,
-      },
-    } = this.props;
-
-    if (prevPlaylist && playlist && prevPlaylist.moved_to !== playlist.moved_to) {
-      push(`/playlist/${encodeUri(playlist.moved_to)}`);
+  useEffect(() => {
+    if (playlistProp) {
+      setWindowTitle(i18n('playlist.title_window', { name: playlistProp.name }));
+    } else {
+      setWindowTitle(i18n('playlist.title'));
     }
+    setPlaylist(playlistProp);
+  }, [playlistProp]);
 
-    if (uri !== prevUri) {
-      loadPlaylist(uri, { full: true, name });
-    }
-
-    if (!prevPlaylist && playlist) this.setWindowTitle(playlist);
-    if (prevUri !== uri && playlist) this.setWindowTitle(playlist);
-  }
-
-  setWindowTitle = (playlist = this.props.playlist) => {
-    const { uiActions: { setWindowTitle } } = this.props;
-    setWindowTitle(
-      playlist ? i18n('playlist.title_window', { name: playlist.name }) : i18n('playlist.title'),
-    );
-  }
-
-  handleContextMenu = (e) => {
-    const {
-      uiActions: {
-        showContextMenu,
-      },
-      playlist,
-      uri,
-      name,
-    } = this.props;
-
-    showContextMenu({
-      e,
-      context: 'playlist',
-      items: [{ name, ...playlist }],
-      uris: [uri],
-    });
-  }
-
-  play = () => {
-    const {
-      mopidyActions: {
-        playPlaylist,
-      },
-      playlist: {
-        uri,
-      },
-    } = this.props;
-
-    playPlaylist(uri);
-  }
-
-  // TODO: Once deletion occurs, remove playlist from global playlists list
-  delete = () => {
-    const {
-      mopidyActions: {
-        deletePlaylist,
-      },
-      playlist: {
-        uri,
-      },
-    } = this.props;
-
-    deletePlaylist(uri);
-  }
-
-  onChangeSort = (field) => {
-    const {
-      sortField,
-      sortReverse,
-      uiActions: {
-        setSort,
-        hideContextMenu,
-      },
-    } = this.props;
+  const handleContextMenu = (e) => showContextMenu({
+    e,
+    context: 'playlist',
+    items: [{ name, ...playlist }],
+    uris: [uri],
+  });
 
+  const onChangeSort = (field) => {
     let reverse = false;
     if (field !== null && sortField === field) {
       reverse = !sortReverse;
@@ -155,25 +186,12 @@ class Playlist extends React.Component {
 
     setSort(SORT_KEY, field, reverse);
     hideContextMenu();
-  }
+  };
 
-  reorderTracks = (indexes, index) => {
-    const {
-      coreActions: {
-        reorderPlaylistTracks,
-      },
-      uiActions: {
-        createNotification,
-      },
-      playlist: {
-        uri,
-        snapshot_id,
-        tracks,
-      },
-      sortField,
-      sortReverse,
-    } = this.props;
-    const { filter } = this.state;
+  const onPlay = () => playPlaylist(uri);
+
+  const reorderTracks = (indexes, index) => {
+    const { snapshot_id, tracks } = playlist;
 
     if (sortField !== 'sort_id' || filter !== '') {
       createNotification({
@@ -193,286 +211,140 @@ class Playlist extends React.Component {
     reorderPlaylistTracks(uri, indexes, index, snapshot_id);
   }
 
-  removeTracks = (tracks_indexes) => {
-    const {
-      coreActions: {
-        removeTracksFromPlaylist,
-      },
-      playlist: {
-        uri,
-      },
-    } = this.props;
-
+  const removeTracks = (tracks_indexes) => {
     removeTracksFromPlaylist(uri, tracks_indexes);
   }
 
-  inLibrary = () => {
-    const { uri } = this.props;
-    const libraryName = `${uriSource(uri)}_library_playlists`;
-    const { [libraryName]: library } = this.props;
-
-    if (!library) return false;
-
-    return library.indexOf(uri) > -1;
+  if (loading) {
+    return <Loader body loading />;
   }
-
-  togglePinned = () => {
-    const {
-      uri,
-      coreActions: {
-        addPinned,
-        removePinned,
-      },
-    } = this.props;
-
-    if (this.isPinned()) {
-      removePinned(uri);
-    } else {
-      addPinned(uri);
-    }
-  }
-
-  renderActions = () => {
-    const {
-      uri,
-      encodedUri,
-      playlist: {
-        can_edit,
-        name,
-        in_library,
-      },
-    } = this.props;
-
-    switch (uriSource(uri)) {
-      case 'm3u':
-        return (
-          <div className="actions">
-            <Button
-              type="primary"
-              onClick={this.play}
-              tracking={{ category: 'Playlist', action: 'Play' }}
-            >
-              <I18n path="actions.play" />
-            </Button>
-            <Button
-              to={`/playlist/${encodedUri}/edit`}
-              tracking={{ category: 'Playlist', action: 'Edit' }}
-            >
-              <I18n path="actions.edit" />
-            </Button>
-            <PinButton item={{ uri, name }} />
-            <ContextMenuTrigger onTrigger={this.handleContextMenu} />
-          </div>
-        );
-
-      case 'spotify':
-        if (can_edit) {
-          return (
-            <div className="actions">
-              <Button
-                type="primary"
-                onClick={this.play}
-                tracking={{ category: 'Playlist', action: 'Play' }}
-              >
-                <I18n path="actions.play" />
-              </Button>
-              <Button
-                to={`/playlist/${encodedUri}/edit`}
-                tracking={{ category: 'Playlist', action: 'Edit' }}
-              >
-                <I18n path="actions.edit" />
-              </Button>
-              <PinButton item={{ uri, name }} />
-              <ContextMenuTrigger onTrigger={this.handleContextMenu} />
-            </div>
-          );
-        }
-        return (
-          <div className="actions">
-            <Button
-              type="primary"
-              onClick={this.play}
-              tracking={{ category: 'Playlist', action: 'Play' }}
-            >
-              <I18n path="actions.play" />
-            </Button>
-            <FollowButton
-              uri={uri}
-              is_following={in_library}
-            />
-            <PinButton item={{ uri, name }} />
-            <ContextMenuTrigger onTrigger={this.handleContextMenu} />
-          </div>
-        );
-
-      default:
-        return (
-          <div className="actions">
-            <Button
-              type="primary"
-              onClick={this.play}
-              tracking={{ category: 'Playlist', action: 'Play' }}
-            >
-              <I18n path="actions.play" />
-            </Button>
-            <PinButton item={{ uri, name }} />
-            <ContextMenuTrigger onTrigger={this.handleContextMenu} />
-          </div>
-        );
-    }
-  }
-
-  render = () => {
-    const {
-      uri,
-      playlist,
-      loading,
-      loading_tracks,
-      slim_mode,
-      sortField,
-      sortReverse,
-    } = this.props;
-    const {
-      filter,
-    } = this.state;
-
-    if (loading) {
-      return <Loader body loading />;
-    }
-    if (!playlist) {
-      return (
-        <ErrorMessage type="not-found" title="Not found">
-          <p>
-            <I18n path="errors.uri_not_found" uri={uri} />
-          </p>
-        </ErrorMessage>
-      );
-    }
-
-    let context = 'playlist';
-    if (playlist.can_edit) {
-      context = 'editable-playlist';
-    }
-    let {
-      playlist: {
-        tracks,
-      },
-    } = this.props;
-
-    if (sortField && tracks) {
-      tracks = sortItems(tracks, sortField, sortReverse);
-    }
-
-    if (filter && filter !== '') {
-      tracks = applyFilter('name', filter, tracks);
-    }
-
-    const sort_options = [
-      {
-        value: 'sort_id',
-        label: i18n('playlist.tracks.sort.sort_id'),
-      },
-      {
-        value: 'name',
-        label: i18n('playlist.tracks.sort.name'),
-      },
-      {
-        value: 'artist',
-        label: i18n('playlist.tracks.sort.artist'),
-      },
-      {
-        value: 'album',
-        label: i18n('playlist.tracks.sort.album'),
-      },
-    ];
-
+  if (!playlist) {
     return (
-      <div className="view playlist-view content-wrapper preserve-3d">
-
-        <div className="thumbnail-wrapper">
-          <Thumbnail size="large" glow canZoom images={playlist.images} type="playlist" />
-        </div>
-
-        <div className="title">
-          <h1>{playlist.name}</h1>
-          {playlist.description && (
-            <h2
-              className="description"
-              dangerouslySetInnerHTML={{ __html: playlist.description }}
-            />
-          )}
-
-          <ul className="details details--one-line">
-            {!slim_mode && (
-              <li className="source">
-                <SourceIcon uri={playlist.uri} />
-              </li>
-            )}
-            {playlist.user && (
-              <li>
-                <URILink
-                  type="user"
-                  uri={playlist.user.uri}
-                >
-                  {playlist.user.name}
-                </URILink>
-              </li>
-            )}
-            <li>
-              <I18n path="specs.tracks" count={playlist.tracks ? playlist.tracks.length : 0} />
-            </li>
-            {!slim_mode && playlist.tracks && playlist.tracks_total > 0 && (
-              <li><Dater type="total-time" data={playlist.tracks} /></li>
-            )}
-            {!slim_mode && playlist.followers !== undefined && (
-              <li>
-                <I18n path="specs.followers" count={nice_number(playlist.followers)} />
-              </li>
-            )}
-            {!slim_mode && playlist.last_modified_date && (
-              <li>
-                <I18n path="specs.edited" date={dater('ago', playlist.last_modified_date)} />
-              </li>
-            )}
-          </ul>
-        </div>
-
-        {this.renderActions()}
-
-        <h4 className="no-bottom-margin">
-          <I18n path="playlist.tracks.title" />
-          {loading_tracks && <Loader loading mini />}
-          <div className="actions-wrapper">
-            <FilterField
-              initialValue={filter}
-              handleChange={(value) => this.setState({ filter: value })}
-              onSubmit={() => uiActions.hideContextMenu()}
-            />
-            <DropdownField
-              icon="swap_vert"
-              name="Sort"
-              value={sortField}
-              valueAsLabel
-              options={sort_options}
-              selected_icon={sortField ? (sortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
-              handleChange={this.onChangeSort}
-            />
-          </div>
-        </h4>
-
-        <section className="list-wrapper no-top-padding">
-          <TrackList
-            uri={playlist.uri}
-            className="playlist-track-list"
-            track_context={context}
-            tracks={tracks}
-            removeTracks={this.removeTracks}
-            reorderTracks={this.reorderTracks}
-          />
-        </section>
-      </div>
+      <ErrorMessage type="not-found" title="Not found">
+        <p>
+          <I18n path="errors.uri_not_found" uri={uri} />
+        </p>
+      </ErrorMessage>
     );
   }
+
+  let context = 'playlist';
+  if (playlist.can_edit) context = 'editable-playlist';
+
+  let tracks = playlist?.tracks || [];
+  if (sortField && tracks) tracks = sortItems(tracks, sortField, sortReverse);
+  if (filter && filter !== '') tracks = applyFilter('name', filter, tracks);
+
+  const sort_options = [
+    {
+      value: 'sort_id',
+      label: i18n('playlist.tracks.sort.sort_id'),
+    },
+    {
+      value: 'name',
+      label: i18n('playlist.tracks.sort.name'),
+    },
+    {
+      value: 'artist',
+      label: i18n('playlist.tracks.sort.artist'),
+    },
+    {
+      value: 'album',
+      label: i18n('playlist.tracks.sort.album'),
+    },
+  ];
+
+  return (
+    <div className="view playlist-view content-wrapper preserve-3d">
+
+      <div className="thumbnail-wrapper">
+        <Thumbnail size="large" glow canZoom images={playlist.images} type="playlist" />
+      </div>
+
+      <div className="title">
+        <h1>{playlist.name}</h1>
+        {playlist.description && (
+          <h2
+            className="description"
+            dangerouslySetInnerHTML={{ __html: playlist.description }}
+          />
+        )}
+
+        <ul className="details details--one-line">
+          {!slim_mode && (
+            <li className="source">
+              <SourceIcon uri={playlist.uri} />
+            </li>
+          )}
+          {playlist.user && (
+            <li>
+              <URILink
+                type="user"
+                uri={playlist.user.uri}
+              >
+                {playlist.user.name}
+              </URILink>
+            </li>
+          )}
+          <li>
+            <I18n path="specs.tracks" count={playlist.tracks ? playlist.tracks.length : 0} />
+          </li>
+          {!slim_mode && playlist.tracks && playlist.tracks_total > 0 && (
+            <li><Dater type="total-time" data={playlist.tracks} /></li>
+          )}
+          {!slim_mode && playlist.followers !== undefined && (
+            <li>
+              <I18n path="specs.followers" count={nice_number(playlist.followers)} />
+            </li>
+          )}
+          {!slim_mode && playlist.last_modified_date && (
+            <li>
+              <I18n path="specs.edited" date={dater('ago', playlist.last_modified_date)} />
+            </li>
+          )}
+        </ul>
+      </div>
+
+      <Actions
+        encodedUri={encodedUri}
+        playlist={playlist}
+        onPlay={onPlay}
+        handleContextMenu={handleContextMenu}
+      />
+
+      <h4 className="no-bottom-margin">
+        <I18n path="playlist.tracks.title" />
+        {loading_tracks && <Loader loading mini />}
+        <div className="actions-wrapper">
+          <FilterField
+            initialValue={filter}
+            handleChange={setFilter}
+            onSubmit={hideContextMenu}
+          />
+          <DropdownField
+            icon="swap_vert"
+            name="Sort"
+            value={sortField}
+            valueAsLabel
+            options={sort_options}
+            selected_icon={sortField ? (sortReverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
+            handleChange={onChangeSort}
+          />
+        </div>
+      </h4>
+
+      <section className="list-wrapper no-top-padding">
+        <TrackList
+          uri={playlist.uri}
+          className="playlist-track-list"
+          track_context={context}
+          tracks={tracks}
+          removeTracks={removeTracks}
+          reorderTracks={reorderTracks}
+        />
+      </section>
+    </div>
+  );
 }
 
 const mapStateToProps = (state, ownProps) => {