Cargar datos al renderizar un componente

tengo una duda, cómo podría hacer que carguen los datos de localStorage en estados al renderizar un componente. Tengo una vista llamada MainForm donde se ejecuta una función que guarda los datos en firebase y posteriormente guarda el uid y la data en localStorage

    const saveData = () => {
        db.collection('user').add({
            brand: brand.brand,
            city: selectedCity,
            model: model.model,
            timestamp: Date.now()
        })
        .then((docRef) => {
            localStorage.setItem('docRef', docRef.id)
            console.log("Document written");
        }).then(() => {
            const getRef = localStorage.getItem('docRef')
            db.collection("prospects").doc(getRef).onSnapshot(function(doc) {
                localStorage.setItem('data', JSON.stringify(doc.data()))
            })
        })
        .catch((error) => console.error("Error adding document: ", error));
    }

después pasa a otro componente llamado Rates en el que quiero que cargue los datos de localStorage en estados para poder renderizar el contenido, lo estoy haciendo de este modo:

    useEffect(() => {
        const getRef = localStorage.getItem('docRef')
        setDocRef(getRef)
        const getData = localStorage.getItem('data')
        const parseData = JSON.parse(getData)
        setData(parseData)
    }, [])

pero no renderiza porque no obtiene los datos, y en la consola primero me aparecen los console.log de Rates, y hasta después de esos me sale el del MainForm

Alguien podría ayudarme para saber qué es lo que puedo hacer o qué estoy haciendo mal?
Muchas gracias.

import { withRouter } from 'react-router-dom'

const App = (props) => {
    const { history } = props

    const saveData = (e) => {
        e.preventDefault() // para que no recargue la página

        // tu código de saveData()

        history.push('/planes')
    }

    return <button onClick={saveData}>Guardar datos</button>
}

export default withRouter(App)