Sunt cazuri in care trebuie sa faci rerender daca se redimensioneaza fereastra, cu CSS nu o sa iti faca rerender. Daca folosesti un higher order component sau useMediaQuery practic media query-ul devine un prop care iti rerandeaza componentele.
Am un custom hook care verifica innerWidth:
import { useState, useEffect } from 'react';
const useWindowWidth = () => {
// Initialize state with undefined width/height so server and client renders match
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
const [width, setWidth] = useState(null);
useEffect(() => {
// Handler to call on window resize
function handleResize() {
// Set window width/height to state
setWidth(window.innerWidth);
}
// Add event listener
window.addEventListener('resize', handleResize);
// Call handler right away so state gets updated with initial window size
handleResize();
// Remove event listener on cleanup
return () => window.removeEventListener('resize', handleResize);
}, []); // Empty array ensures that effect is only run on mount
return width;
};
export default useWindowWidth;
1 Like
Update:
Day 11 and 12
Ieri si astazi am implementat firebase sign in with google account. Am de gand sa adaug si cu github.
Deocamdata sesiunea nu ramane dupa refresh urmeaza sa rezolv asta.
A durat ceva pana am legat lucrurile foloses firebase Web v9 modular version (Learn more about Web and Firebase) care este deocamdata in beta dar mi-a suras ideea de a importa doar ce am nevoie de acolo in loc sa adaug tot app-ul.
Folosesc Redux pentru global state, mai exact redux/toolkit si folosesc noul lor createApi (RTK Query) mi-am cam prins putin urechile pe acolo dar am zis sa o duc pana la capat, support-ul l-am gasit pe discord in canalul oficial de react / sectiunea redux, acolo sunt baietii care se ocupa cu mentinerea si sunt foarte de treaba.
Cam atat, ramane pe zilele viitoare cum o sa ma folosesc de aceste date pentru inceput am sa fac butonul de editare vizibil doar pentru useri logati ca mai tarziu ca fie vizibil doar pentru creatorul articolului + un buton de delete articol.
Nimic vizual care sa arate bine dar functioneaza
2 Likes
Urmeaza sa fac tranzitia spre TypeScript, urmatorul update o sa vina cand o sa fie gata conversia in TS
1 Like