Simple React component to show sorted articles

Date sorting Your dates are of the format YYYY-MM-DD. You currently sort them with:

(a, b) => b.date > a.date ? 1 : b.date === a.date ? 0 : -1

When you want to lexiographically compare strings to determine which comes first in the alphabet for sorting, you can do it more concisely with localeCompare, which returns a number indicating whether one string comes before, is the same as, or after another. You can use:

(a, b) => b.date.localeCompare(a.date);

articlesOrder's state relies on, essentially, magic strings:

const [articlesOrder, setArticlesOrder] = useState('byUpvotesDesc')

Since there are only two possible sorting methods, you might consider using a boolean instead:

const [orderByUpvotes, setOrderByUpvotes] = useState(true)

If there were more sorting methods, I would feel a bit more comfortable using an enum of sorts (or TypeScript to enforce string comparison safety) than comparing strings like articlesOrder === 'byUpvotesDesc' that need to match across multiple places in the code. For example:

const SORTING_OPTIONS = {
  byUpvotesDesc: 0,
  byDatesDesc: 1,
  // ...
};
// ...
const [articlesOrder, setArticlesOrder] = useState(SORTING_OPTIONS.byUpvotesDesc);

Another option would be to omit the articlesOrder variable entirely, and instead only sort the articles when a button is clicked (see below) - but if you want to expand on the component, keeping an articlesOrder variable will probably be useful to indicate to the user what the current sorting order is (for example, to give the top container a visual indicator of what option is currently selected).

Mutation You are mutating the prop when you do:

<Articles articles={articles.sort(articlesOrder === 'byUpvotesDesc' ? sortByUpvotesDesc : sortByDateDesc)} />

because .sort sorts in-place. Put the prop into state instead, and when a new sort order needs to occur, copy the array before sorting it so as not to mutate. Also, rather than .sorting every time the component is rendered, it would be better to sort only when the sort order changes. Here's one possible approach:

const sortByUpvotesDesc = (a, b) => b.upvotes - a.upvotes
const sortByDateDesc = (a, b) => b.date.localeCompare(a.date);

function App({ articles: articlesProp }) {
    const [articles, setArticles] = useState(articlesProp);
    const [articlesOrder, setArticlesOrder] = useState();

    const sortArticles = (callback) => {
        setArticles(
            articles => articles.slice().sort(callback)
        );
    };
    // The below could be made more abstract and DRY if there were more options
    // but with only two, it would probably be more confusing than useful
    const mostUpvotedClickHandler = () => {
        sortArticles(sortByUpvotesDesc);
        setArticlesOrder(SORTING_OPTIONS.byUpvotesDesc);
    };
    const mostRecentClickHandler = () => {
        sortArticles(sortByDateDesc);
        setArticlesOrder(SORTING_OPTIONS.byDatesDesc);
    };
    // Sort articles on initial mount, before they're rendered, to avoid reflow:
    useLayoutEffect(mostUpvotedClickHandler, []);

    return (
        <div className="App">
            <div>
                <label>Sort By</label>
                <button onClick={mostUpvotedClickHandler} >Most Upvoted</button>
                <button onClick={mostRecentClickHandler} >Most Recent</button>
            </div>
            <Articles articles={articles} />
        </div>
    );
}

Semicolons Best to be consistent; either use semicolons or don't. If you're skilled and confident that you won't be bitten by the rules of ASI, you can omit them. Use a linter to enforce your desired style across your codebase.