Если кратко, то DEV зависимости + обычные зависимости нужны для разработки, а только обычные - для Production. В DEV зависимости должны попадать только те пакеты, которые нужны исключительно разработчику, например, библиотеки тестирования, сборки и реформатирования. react-scripts логичнее положить именно в DEV.

Сам компонент необходимо обернуть в memo. Этот HOC предотвращает ре-рендер компонента, если не изменились пропсы.
export default React.memo(Button);
Если пропсы меняются, компонент в любом случае перерендерится (если только не подставлен второй аргумент - сравнивающая пропсы функция). onClick, по идее, менятся не должен. Если же в текущем коде он все-таки меняется, попробуйте обернуть этот callback в React.useCallback, где первый аргумент - функция, а второй - при изменении каких переменных она перезаписывается.

const handleMyButtonClick = React.useCallback(
  ([arg1, [arg2,..]]) => {...}, 
[[dep1, [dep2,..]]]);

В итоге должно получится что-то вроде этого:

const onClick = React.useCallback(() => {
  setJokes(prevValue => prevValue + 5);
},
[]);

useCallback
memo