React Hooks & redux cause unnecesary rendering and some unexpected effects - reactjs

Question

Expected behavior - I load an photo object and render it in my component.
With the code below I do achieve the result, but with some unexpected effects which in the end make this component not useful - see further description in two parts.
I really want to dive in the cause of all of it and to understand how can I prevent such behavior in my app.
I did try some suggestions from others peoples similar problems, but nothing did helped. I won't list here the things I've tried, because, obviously, everytime I tried - I did something wrong since it didn't help me.
I will be grateful for any ideas and suggestions - I miss something and can't understand what is it.
Part 1 of the problem.
While loading this component for the first time and/or refreshing it - I get multiple rerenders. From the Redux DevTools I can observ that the actions fire for two times, console-logging any received from the photo value shows that this value appears in the console 6 times (first 3 times - with initial state from the redux-store, after - with the expected fetched from the photo object value).
Part 2 of the problem.
When I open the next photo (the same component, just passing different match.params.id) - the component starting to rerender apparently for random times. It might take some seconds to complete this rerender loop, so it rerenders sometimes for dozens, sometimes for more then a 100 time, but always in the end is rendering the needed info.
Analyzing the logs I saw that the the values of fetched now photo are just switching in the loop with the values of the photo fetched before. The looping stops with the correct values. And where from the previos values are coming - I can't figure out, because before fetching a new photo object I clear all the data of the previous in the redux state.
Component:
//IMPORTS
const Photo = ({ getPhotoById, photo, loading, match }) => {
const [photoData, setPhotoData] = useState({
photoID: match.params.id,
imgUrl: '',
photoFileName: '',
title: '',
description: '',
albumID: '',
albumName: '',
categoryID: '',
categoryName: '',
categoryID2: '',
categoryName2: '',
categoryID3: '',
categoryName3: '',
locationID: '',
locationName: '',
contributorID: '',
contributorName: '',
contributorWeb: '',
source: '',
sourceWeb: '',
author: '',
periodID: '',
periodName: '',
license: ''
});
const {
photoID,
imgUrl,
photoFileName,
title,
description,
albumID,
albumName,
categoryID,
categoryName,
categoryID2,
categoryName2,
categoryID3,
categoryName3,
locationID,
locationName,
contributorID,
contributorName,
source,
sourceWeb,
author,
periodID,
periodName,
license
} = photoData;
useEffect(() => {
getPhotoById(photoID);
}, [getPhotoById, photoID]);
useEffect(() => {
if (loading === false) {
const {
photoID,
imgUrl,
photoFileName,
title,
description,
albumID,
albumName,
categoryID,
categoryName,
categoryID2,
categoryName2,
categoryID3,
categoryName3,
locationID,
locationName,
contributorID,
contributorName,
source,
sourceWeb,
author,
periodID,
periodName,
license
} = photo;
setPhotoData({
photoID,
imgUrl,
photoFileName,
title,
description,
albumID,
albumName,
categoryID,
categoryName,
categoryID2,
categoryName2,
categoryID3,
categoryName3,
locationID,
locationName,
contributorID,
contributorName,
source,
sourceWeb,
author,
periodID,
periodName,
license
});
}
}, [loading]);
useEffect(() => {
if (!loading) {
initOpenseadragon();
}
}, [loading]);
console.log(photoFileName, 'photoFileName');
const initOpenseadragon = () => {
OpenSeadragon({
id: 'viewer',
tileSources: `/uploads/tiles/${photoFileName}.dzi`,
prefixUrl: '/images/osd/',
showZoomControl: true,
showHomeControl: true,
showFullPageControl: true,
showRotationControl: true
});
};
return !photo && !loading ? (
<NotFound />
) : (
<Fragment>
SOME JSX
</Fragment>
);
};
Photo.propTypes = {
getPhotoById: PropTypes.func.isRequired,
// photo: PropTypes.object.isRequired,
loading: PropTypes.bool.isRequired
};
const mapStateToProps = state => {
return {
photo: state.photo.photo,
loading: state.photo.loading
};
};
export default connect(
mapStateToProps,
{ getPhotoById }
)(Photo);
ACTION:
export const getPhotoById = photo_id => async dispatch => {
try {
dispatch({ type: CLEAR_PHOTO });
dispatch({ type: LOAD_PHOTO });
const res = await axios.get(`/api/photo/${photo_id}`);
dispatch({
type: GET_PHOTO,
payload: res.data
});
} catch (err) {
dispatch({
type: PHOTOS_ERROR,
payload: { msg: err.response.statusText, status: err.response.status }
});
}
};
REDUCER
const initialState = {
photo: null,
photos: [],
loading: true,
error: {}
};
const photo = (state = initialState, action) => {
const { type, payload } = action;
switch (type) {
case GET_PHOTO:
return {
...state,
photo: payload,
loading: false
};
case LOAD_PHOTO:
return {
...state,
loading: true
};
case CLEAR_PHOTO:
return {
...state,
photo: null,
loading: false
};
case PHOTOS_ERROR:
return {
...state,
error: payload,
loading: false
};
default:
return state;
}
};
export default photo;

Answer 1

Your problem is that you are adding getPhotoById as a dependency of your hook see this article about the dependency array.
If you want to prevent the re-render you can do the following:
const ref = useRef();
getPhotoByIdRef.current = getPhotoById
useEffect(() => {
getPhotoByIdRef(match.params.id)
}, [getPhotoByIdRef, match.params.id]);