Реагировать на рендеринг несколько раз - PullRequest
Новая
       3

Реагировать на рендеринг несколько раз

0 голосов
/ 10 июля 2020

Моя App.js папка переключается на мою Login container, когда URL-адрес /login, где я использовал useSelector для возврата состояний из redux. Мой Login Container: 

export default function LoginForm() {

console.log('Login Rendered')

const dispatch = useDispatch()


const redirect = useSelector(state => state.auth.redirect)
const loading = useSelector(state => state.auth.loginLoading)


const [inputVal, setInputVal] = useState({ username: '', password: '' })

const onChangeHandler = e => setInputVal({
    ...inputVal,
    [e.target.name]: e.target.value
})


const submitLogin = e => { e.preventDefault(); dispatch(login(inputVal)); }

const responseGoogle = response => dispatch(googleLogin({ email: response.profileObj.email }))

if (redirect) return <Redirect exact to='/' />

return (
    <Login
        inputVal={inputVal}
    // onChangeHandler={onChangeHandler} 
    // submitLogin={submitLogin}
    //   loading={loading} 
    />
)}

Мой Login Component просто имеет UI elements, который действует на props, где я использовал React.memo, чтобы избежать ненужных рендеров. Каждый раз, когда я переключаю URLs, login container отображается 2 раза, а login component - один раз. Когда я перезагружаю страницу, container отображается шесть раз. Как я могу минимизировать время рендеринга? Это также заставляет мое приложение каждый раз занимать все больше и больше памяти. Это потому, что моя компонентная организация неэффективна?

...