add useMemo and 3 more sortBy options

app/src/components/feed.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-filename-extension */
 import React from 'react';
 import '../styles/sidebar.css';
 import BookCard from './bookcard';
@@ -6,13 +7,14 @@ import SortByDropdown, { FIELDS_TO_SORT_BY, compareFunctions } from './sortByDro
 export default ({ data, limit }) => {
   const [sortBy, setSortBy] = React.useState(FIELDS_TO_SORT_BY[0]);
 
-  const getSortedBooks = () => [...data.allBooksJson.edges]
-    .sort(compareFunctions[sortBy]);
+  const sortedBooks = React.useMemo(() => [...data.allBooksJson.edges]
+    .sort(compareFunctions[sortBy.value]),
+  [sortBy]);
 
   return (
     <>
-      <SortByDropdown sortBy={sortBy} onSortByItemClick={setSortBy} />
-      {getSortedBooks().map((x, index) => {
+      <SortByDropdown sortBy={sortBy.label} onSortByItemClick={setSortBy} />
+      {sortedBooks.map((x, index) => {
         const book = x.node;
         if (!limit || index < limit) {
           if (!book.description || book.description.length < 10) {