![maybeshalinii's tweet photo. DAY 3 of #20DaysOfReact
Topics Covered :
1. States
2. Prop drilling
States in React
Imagine you're building a digital thermostat. The "state" in React is like the current temperature displayed on the screen. It's a way for your app to remember and show information that changes over time. For instance, as the room gets warmer or cooler, the displayed temperature updates to show the current temperature.
In React, we use "state" to make sure our app can remember and show changing information like this. It's like a note that React keeps, and whenever something important changes (like the temperature), React takes a look at the note and updates what's displayed on the screen to match.
The state object is where you store property values that belong to the component. Whenever the state object changes, the component re-renders.
useState
When you want to change something on your web page (like updating a score in a game or displaying a new message), you need two things:
Remember the Change: You need a way to remember what you want to change. For instance, if you're playing a game, you need to remember the score.
Make the Change Visible: You also need a way to show the change on your web page. If your score goes up, the web page should update to show the new score.
The useState Hook* in React helps with both of these things:
Memory Box: It gives you a special "memory box" where you can put the thing you want to change (like the score in a game). This box remembers it even when your web page refreshes or updates.
Magic Button: It also gives you a special "magic button" that you can press when you want to make the change visible. When you press this button, React looks in the memory box, sees what's changed, and updates your web page to show the new information. So, if your score goes up, React makes sure the new score is displayed.
Hook.*
[*Hooks are like building blocks in React that allow you to use various features in your web applications. These building blocks can be either pre-made (built-in) by React or custom-made by you by combining them.(We'll discuss about this in detail later)]
Prop Drilling
Think of prop drilling like passing a message along a line of people. Imagine you're playing a game of "telephone" with your friends, and you want to tell the last person in line a secret message. You whisper it to the first person, who whispers it to the next, and so on until it reaches the last person.
"Prop drilling" is a term used in React to describe the process of passing data from a parent component to a deeply nested child component through intermediary components. It can occur when you have a component hierarchy where data needs to be passed down multiple levels.
While prop drilling works, it can lead to several challenges:
Complexity: As your component tree deepens, prop drilling can make your code more complex and harder to maintain.
Performance: Passing props through multiple components, especially when those components don't use the props themselves, can affect performance.
Readability: Code readability can suffer as you pass props through multiple levels of components.
That's it for Day 3! Tomorrow, we'll explore Conditional rendering and Component Lifecycle.
Stay tuned and happy coding! 🚀](https://pbs.twimg.com/media/F7AWXPHWgAA-ONg.png)
![maybeshalinii's tweet photo. DAY 3 of #20DaysOfReact
Topics Covered :
1. States
2. Prop drilling
States in React
Imagine you're building a digital thermostat. The "state" in React is like the current temperature displayed on the screen. It's a way for your app to remember and show information that changes over time. For instance, as the room gets warmer or cooler, the displayed temperature updates to show the current temperature.
In React, we use "state" to make sure our app can remember and show changing information like this. It's like a note that React keeps, and whenever something important changes (like the temperature), React takes a look at the note and updates what's displayed on the screen to match.
The state object is where you store property values that belong to the component. Whenever the state object changes, the component re-renders.
useState
When you want to change something on your web page (like updating a score in a game or displaying a new message), you need two things:
Remember the Change: You need a way to remember what you want to change. For instance, if you're playing a game, you need to remember the score.
Make the Change Visible: You also need a way to show the change on your web page. If your score goes up, the web page should update to show the new score.
The useState Hook* in React helps with both of these things:
Memory Box: It gives you a special "memory box" where you can put the thing you want to change (like the score in a game). This box remembers it even when your web page refreshes or updates.
Magic Button: It also gives you a special "magic button" that you can press when you want to make the change visible. When you press this button, React looks in the memory box, sees what's changed, and updates your web page to show the new information. So, if your score goes up, React makes sure the new score is displayed.
Hook.*
[*Hooks are like building blocks in React that allow you to use various features in your web applications. These building blocks can be either pre-made (built-in) by React or custom-made by you by combining them.(We'll discuss about this in detail later)]
Prop Drilling
Think of prop drilling like passing a message along a line of people. Imagine you're playing a game of "telephone" with your friends, and you want to tell the last person in line a secret message. You whisper it to the first person, who whispers it to the next, and so on until it reaches the last person.
"Prop drilling" is a term used in React to describe the process of passing data from a parent component to a deeply nested child component through intermediary components. It can occur when you have a component hierarchy where data needs to be passed down multiple levels.
While prop drilling works, it can lead to several challenges:
Complexity: As your component tree deepens, prop drilling can make your code more complex and harder to maintain.
Performance: Passing props through multiple components, especially when those components don't use the props themselves, can affect performance.
Readability: Code readability can suffer as you pass props through multiple levels of components.
That's it for Day 3! Tomorrow, we'll explore Conditional rendering and Component Lifecycle.
Stay tuned and happy coding! 🚀](https://pbs.twimg.com/media/F7AWXPHWUAEAlKn.jpg)
Olivia
Online
Divakar Jha
@__itsdj_
A myopic author.
Darbhanga, India
Joined August 2017
189 Following
666 Followers
440 Posts
Abhi picture baki hai…
I'm 57.
If you're in your 20's, please read this:
@AryanTrivedi_7 Interested 🙂
Who to follow
Nfg Francis Black
@nfg_hello
Digital creator 🌍
Chill vibes. Real life & Freedom😎
🔔Let's Support Each Other Guys🔔
📣 I follow back right now📣
Mina Van 文风英, BSN, RN, Nurse, Coach 
@mina_van1104
文鳳 英 ❤️CheerleadingCoach,𝐍𝐔𝐑𝐒𝐄🏥, Health,Compassion,Athletic🤸🏽♀️Run, Sing,UNRnvAlum🎓NativeNevadan,HeartFailureSurvivor,Skydived,adventure!🐺🐶🐱🐱♏️🦂
🆁🅶|🆃🅷🅴🅵🅻🅸🆇🆃🅰
@TheFlixta
Twitch:https://t.co/3LIcbMz0Jv
Regiment Member:
sponsored by Gfuel: use code Regiment for 30% off
@TheOfficialSBI @SBICard_Connect @RBI "मैंने ऑनलाइन धोखाधड़ी की घटना को एक घंटे के अंदर एसबीआई कार्ड और स्टेट बैंक को सूचित किया, शिकायत भी दर्ज करवाई, लेकिन कोई मदद नहीं मिली। अब आप यह कह रहे हैं कि ग्राहक ही इस धोखाधड़ी के लिए जिम्मेदार हैं और इसका भुगतान करन होगा।कृपया मदद कर
Lunga vita all'amicizia Italia-India! 🇮🇳 🇮🇹
@letscodedevs https://t.co/amihbRjT5l
Hello everyone, the React document is here:
https://t.co/GilZhlkwN8
@maybeshalinii Interested
You're in an interview, and the interviewer asks,
"Can you tell me about yourself?"/ "Tell me something about yourself."
Here is how you can answer:
it’s really just me and my 10 repeated songs vs the world
6 Steps to Be More Charismatic and Mysterious (And Still be Yourself)
1/6: Listen much more than you talk.
Learn CSS Flex!
Flex layout is difficult to understand.
But this post will help you understand everything about CSS Flex Layout.
DAY 3 of #20DaysOfReact
Topics Covered :
1. States
2. Prop drilling
States in React
Imagine you're building a digital thermostat. The "state" in React is like the current temperature displayed on the screen. It's a way for your app to remember and show information that changes over time. For instance, as the room gets warmer or cooler, the displayed temperature updates to show the current temperature.
In React, we use "state" to make sure our app can remember and show changing information like this. It's like a note that React keeps, and whenever something important changes (like the temperature), React takes a look at the note and updates what's displayed on the screen to match.
The state object is where you store property values that belong to the component. Whenever the state object changes, the component re-renders.
useState
When you want to change something on your web page (like updating a score in a game or displaying a new message), you need two things:
Remember the Change: You need a way to remember what you want to change. For instance, if you're playing a game, you need to remember the score.
Make the Change Visible: You also need a way to show the change on your web page. If your score goes up, the web page should update to show the new score.
The useState Hook* in React helps with both of these things:
Memory Box: It gives you a special "memory box" where you can put the thing you want to change (like the score in a game). This box remembers it even when your web page refreshes or updates.
Magic Button: It also gives you a special "magic button" that you can press when you want to make the change visible. When you press this button, React looks in the memory box, sees what's changed, and updates your web page to show the new information. So, if your score goes up, React makes sure the new score is displayed.
Hook.*
[*Hooks are like building blocks in React that allow you to use various features in your web applications. These building blocks can be either pre-made (built-in) by React or custom-made by you by combining them.(We'll discuss about this in detail later)]
Prop Drilling
Think of prop drilling like passing a message along a line of people. Imagine you're playing a game of "telephone" with your friends, and you want to tell the last person in line a secret message. You whisper it to the first person, who whispers it to the next, and so on until it reaches the last person.
"Prop drilling" is a term used in React to describe the process of passing data from a parent component to a deeply nested child component through intermediary components. It can occur when you have a component hierarchy where data needs to be passed down multiple levels.
While prop drilling works, it can lead to several challenges:
Complexity: As your component tree deepens, prop drilling can make your code more complex and harder to maintain.
Performance: Passing props through multiple components, especially when those components don't use the props themselves, can affect performance.
Readability: Code readability can suffer as you pass props through multiple levels of components.
That's it for Day 3! Tomorrow, we'll explore Conditional rendering and Component Lifecycle.
Stay tuned and happy coding! 🚀
![maybeshalinii's tweet photo. DAY 3 of #20DaysOfReact
Topics Covered :
1. States
2. Prop drilling
States in React
Imagine you're building a digital thermostat. The "state" in React is like the current temperature displayed on the screen. It's a way for your app to remember and show information that changes over time. For instance, as the room gets warmer or cooler, the displayed temperature updates to show the current temperature.
In React, we use "state" to make sure our app can remember and show changing information like this. It's like a note that React keeps, and whenever something important changes (like the temperature), React takes a look at the note and updates what's displayed on the screen to match.
The state object is where you store property values that belong to the component. Whenever the state object changes, the component re-renders.
useState
When you want to change something on your web page (like updating a score in a game or displaying a new message), you need two things:
Remember the Change: You need a way to remember what you want to change. For instance, if you're playing a game, you need to remember the score.
Make the Change Visible: You also need a way to show the change on your web page. If your score goes up, the web page should update to show the new score.
The useState Hook* in React helps with both of these things:
Memory Box: It gives you a special "memory box" where you can put the thing you want to change (like the score in a game). This box remembers it even when your web page refreshes or updates.
Magic Button: It also gives you a special "magic button" that you can press when you want to make the change visible. When you press this button, React looks in the memory box, sees what's changed, and updates your web page to show the new information. So, if your score goes up, React makes sure the new score is displayed.
Hook.*
[*Hooks are like building blocks in React that allow you to use various features in your web applications. These building blocks can be either pre-made (built-in) by React or custom-made by you by combining them.(We'll discuss about this in detail later)]
Prop Drilling
Think of prop drilling like passing a message along a line of people. Imagine you're playing a game of "telephone" with your friends, and you want to tell the last person in line a secret message. You whisper it to the first person, who whispers it to the next, and so on until it reaches the last person.
"Prop drilling" is a term used in React to describe the process of passing data from a parent component to a deeply nested child component through intermediary components. It can occur when you have a component hierarchy where data needs to be passed down multiple levels.
While prop drilling works, it can lead to several challenges:
Complexity: As your component tree deepens, prop drilling can make your code more complex and harder to maintain.
Performance: Passing props through multiple components, especially when those components don't use the props themselves, can affect performance.
Readability: Code readability can suffer as you pass props through multiple levels of components.
That's it for Day 3! Tomorrow, we'll explore Conditional rendering and Component Lifecycle.
Stay tuned and happy coding! 🚀](https://pbs.twimg.com/media/F7AWXPIW4AAtW-r.jpg)
Complete Interview Preparation Resources (DSA+DBMS+OS+CN+OOPS+Aptitude) [2023-24] that I & my friends at college are following - a complete thread 🧵
Placements are going & everyone is working hard to get placed. Open this thread & checkout the resources.
(1/n) 👇
![iamsachin_47's tweet photo. Complete Interview Preparation Resources (DSA+DBMS+OS+CN+OOPS+Aptitude) [2023-24] that I & my friends at college are following - a complete thread 🧵
Placements are going & everyone is working hard to get placed. Open this thread & checkout the resources.
(1/n) 👇 https://t.co/BZdzJmd5E9](https://pbs.twimg.com/media/F6TXhXua0AAtIfk.jpg)
@EshaSingh_18 Trust the process. Intern is just the beginning. You still have 20/30 years left.
Come out of the loop of achieving everything in the first go. Circumstances, scenarios change, and its better to accept it.
Remember Dhoni never played U19 WC :)
Last Seen Users on Sotwe
A-NGK-X.X
Seen from Mexico
Hanya Retweet
Seen from Germany
Susu Nikmat
Seen from United Kingdom
blaire velvet 🏳️⚧️
Seen from United States
Sevda
Seen from Canada
موقع سكس العرب
Seen from Egypt
Anh Trai Slim 17 Đà Nẵng
Seen from Vietnam
adana a
Seen from Turkey
القلب الطيب
Seen from Egypt
kalpsiz
Seen from Turkey
Most Popular Users
Elon Musk
@elonmusk
240.8M followers
Barack Obama
@barackobama
119.2M followers
Donald J. Trump
@realdonaldtrump
111.7M followers
Cristiano Ronaldo
@cristiano
111.4M followers
Narendra Modi
@narendramodi
107M followers
Rihanna
@rihanna
97.8M followers
NASA
@nasa
92.2M followers
Justin Bieber
@justinbieber
91.1M followers
KATY PERRY
@katyperry
88.1M followers
Taylor Swift
@taylorswift13
81.9M followers
Lady Gaga
@ladygaga
73.5M followers
Virat Kohli
@imvkohli
70.5M followers
Kim Kardashian
@kimkardashian
70M followers
YouTube
@youtube
68.7M followers
Bill Gates
@billgates
64.1M followers
Neymar Jr
@neymarjr
63.4M followers
The Ellen Show
@theellenshow
62.4M followers
CNN
@cnn
61.9M followers
Selena Gomez
@selenagomez
61.2M followers
X
@x
60.8M followers