Line 16: React Hook "useState" is called conditionally - reactjs

Question

enter image description here
const Credits = ({ cast, baseUrl }) => {
if (!cast) {
return;
}
const [totalShow, setTotalShow] = useState(null);
const sliderElement = useRef();
// Set amount of items to show on slider based on the width of the element
const changeTotalShow = () => {
let totalItems = Math.round(sliderElement.current.offsetWidth / 70);
if (totalItems > cast.length) {
totalItems = cast.length;
}
setTotalShow(totalItems);
};
const items = cast.map(person => ());
useEffect(() => {
changeTotalShow();
window.addEventListener("resize", changeTotalShow);
return () => window.removeEventListener("resize", changeTotalShow);
}, []);
const settings = {
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
swipeToSlide: true,
speed: 500,
slidesToShow: totalShow,
slidesToScroll: 1,
nextArrow: ,
prevArrow: ,
};
return { items };
};

Answer 1

First you should look at the rule of hooks, so you know what you can and can't do with hooks. You will notice that you can't have hooks called conditionally which means with every render you should have the same number of hooks. You dont as it can be that if !credits the render will not call anything. I presume if you will move
if (!cast) {
return;
}
below any hooks the warning/error will go away.