По вопросам:
1 Особой разницы нет, только для вашей IDE - она правильнее подсказки будет делать в файле jsx
2 Первое предупреждение о том, что используете key={todo.id} немного не там - нужно в родительский div это переместить
<div className="todos" вот сюда>
<div key={todo.id} className="item-todo" >
второе предупреждение связано с тем, что хук в своем массиве зависимостей не видит вызываемую в нем функцию
useEffect(() => {
getTodos()
}, [вот тут])
пока можете поставить такую строку, чтобы не видеть ошибку
useEffect(() => {
getTodos()
// eslint-disable-next-line
}, [])
Если хотите разобраться с правильным использованием
useEffect 