🚀Day 100 of #100DaysOfCode
Tinkered a bit with #gsoc opensource repos of some big orgs. Looking forward to contribute in them and learn more practical knowledge now.
Finally completed 100days challenge and consitency maintained ,but will definately not stop here✨
#Android
Learned about tailwind today its faster than vanilla css like we can use sm:flex instead of @mediaquery to create breakpoints but it need more hands on practice to master!
Learned about Performance strategies today in #React. StrictMode, useMemo React.memo() ,using dev tools to intentionally slow web app and useCallback hook. #Frontend#performanceevaluation
Learned about Render Props ,Headless Component and Context in React. Context is better than using Children api for state passing to childrens deep down the tree. Created this simple reusable badge Component and some more components.
#WebDevelopment#Reusability#learninginpublic
Studied Compound component
- Use children props
- Have dedicated function/styling
- Make the component structure more transparent
- Give more control to the "user" of the component
Also React.Children API with its shortcomings
#WebDevelopment#Reusability#learninginpublic
Applied useRef,useEffect and useState and learned to make this simple tenzies game. Its important to derive values from state rather than always using useEffect and syncing 2 states like deriving youWin from dice state.
#BuildInPublic#Frontend#WebDevelopment#CodingJourney
useEffect for focus because:
- We need to wait until AFTER the render when the DOM element actually exists
- Focus is a side effect that should happen in response to state changes It provides the correct timing: state change → render → DOM update → effect runs
useRef for DOM access because:
- It doesn't trigger re-renders when the reference changes
- It persists the same reference object across renders
useState would cause infinite re-render loops
What I learned today:
- Controlled components(forms do this automatically but there are some usecases where we need to manage each keystroke of state)
- Functional programming in React
- Fetching data directly on loading app
- Side effects using useEffect() hook #WebDev
Practiced more react state and local state,shared state. Shared state is more used as we can only send state from parent to children downwards and there should be single source of truth. Also learned about react markdown package. #react#WebDevelopment
Today learned about react state and why is it better to use state where we need to make intractive component than using props. useState returns array[state,fn()] and we destructure to use its state and function as state setter. #react#WebDevelopment
React is starting to make so much sense! The core concepts are finally clicking.
JSX is awesome for describing my UI.
Composability means I can build complex pages from small, reusable pieces.
#javascript#frontend#webdev