Сделай хок который тебе обернёт кнопку и карточку в один компонент

А какую проблему он решит?

Будет ещё более структурированно

Почему именно хок? Чего не просто в waraper компонент обернуть?

Можно и так, я сказал просто своё личное мнение...

Масив поместить в компанент Card?

Не, массив можно прямо в App поместить

можно ссылки или это гуглится легко?

Я бы так не делал потому что при каждом ре-рендере App масив будет тоже ре-рендерится, лучше всё же вынести в отдельный файл

Если в useState поместить то не будет же?

При каждо изминении стейта, компонент ререндерит себя и компоненты которые в нем. Как писал Антон, если стейт будет в корневом компоненте то из за карточек будет ререндер всего приложения

Еще вопросик такой, где проще выполнять загрузку данных для компонент? Например у меня есть компонент Widgets и я гружу для него данные (только для него) в useEffect. Но мне это кажется моим говнокодом, я перегружаю свой компонент не нужной логикой и обработкой. Хотелось бы эту логику вынести куда то, но для этого я так понимаю нужен какой то стейт-менеджер. Сейчас я его не использую, ибо по сути он мне и не нужен - у меня нету передачи пропсов на несколько уровней вложенности, да и состояние никак не глобальное так то. Есть какие то варианты использования стейт-менеджеров локально для компонентов?  Просто кроме Redux ничего другого не знаю, а он не подходит сдесь.

Context есть, в реакт 16 сделали удобным

менее сложная вещь чем redux

В кастомный хук вынесите, этого будет достаточно.

а имя? useWidgets()?

Можно и так.

спасибо)

не совсем понял тогда, как вы предлагаете сделать?

Просто отдельный файл, какой-то array.ts например (название лучше придумать) в котором export const a = [ {...} ] а в компоненте потом уже import a from ./array.ts и в компоненте a.map(...)