Re-rendering a React component?

Question

React

Good afternoon, help me understand how can I make the component rerender with a new link

const block = ({url}) => {
    const [loading, setLoading] = useState(true);
    const [data, setData]:any = useState();

    useEffect(() => {
        if (loading && url !== null) {
            axios.get(url, { responseType: 'blob' }).then(response => {
                setData(window.URL.createObjectURL(response.data));
                setLoading(false);
            });
        }
        return () => {};
    });

    return loading ? (
        <div
            style={{
                width: '100%',
                height: '160px',
                display: 'grid',
                alignItems: 'center',
                justifyContent: 'center'
            }}
        >
            <FontAwesomeIcon
                style={{ fontSize: 20 }}
                spin
                icon={faSpinner}
            />
        </div>
    ) : (
        <div style={{ width: '100%', height: 160 }}>
            <img
                style={{
                    objectFit: 'contain',
                    objectPosition: 'center',
                    maxWidth: '100%',
                    maxHeight: '100%'
                }}
                width="100%"
                height="auto"
                src={data}
            />
        </div>
    );
}

At the first start, everything is fine, but when I dynamically change the props.url props, then for some reason data does not change - which is like setData to a new one

Answer 1

loading is always false after first render => condition fails => state doesn't change => component doesn't rerender