change in hook state not updating value in template literals - reactjs

Question

I am new to hooks and is coming after learning react with classes, so a bit lost. in the below code I am changing setDog to Husky which should then tell the API call to search and fetch me pic of a husky. But its not happening despite the change in dog. Can anyone see where I am going wrong?
import React, { useState, useEffect } from 'react';
import axios from 'axios';
export default function ApiCalls() {
const [ data, setData ] = useState();
const [ dog, setDog ] = useState('labrador');
useEffect(() => {
const fetchData = async () => {
const result = await axios(`https://dog.ceo/api/breed/${dog}/images`);
setData(result.data.message[0]);
};
fetchData();
}, []);
const Husky = () => {
setDog('husky');
};
return (
<div>
<img alt={''} src={data} />
<button onClick={Husky}>Retrieve Husky</button>
</div>
);
}

Answer 1

Your useEffect sensivitylist is [], so this useEffect just run on component mount that the dog variable is labrador. So after you change dog on button click nothings new will be fetched from server. Change your code as follow:
useEffect(() => {
const fetchData = async () => {
const result = await axios(`https://dog.ceo/api/breed/${dog}/images`);
setData(result.data.message[0]);
};
fetchData();
}, [dog]);

Answer 2

useEffect only run once because the dependency array is [] empty. So when you change dog it wont trigger. To fix this add dog to useEffect dependency
import React, { useState, useEffect } from 'react';
import axios from 'axios';
export default function ApiCalls() {
const [ data, setData ] = useState();
const [ dog, setDog ] = useState('labrador');
useEffect(() => {
const fetchData = async () => {
const result = await axios(`https://dog.ceo/api/breed/${dog}/images`);
setData(result.data.message[0]);
};
fetchData();
}, [dog]);
const Husky = () => {
setDog('husky');
};
return (
<div>
<img alt={''} src={data} />
<button onClick={Husky}>Retrieve Husky</button>
</div>
);
}

Answer 3

Do this
const fetchData = async (input) => {
const result = await axios(`https://dog.ceo/api/breed/${input}/images`);
setData(result.data.message[0]);
};
useEffect(() => fetchData(dog), []);