You might not need useState()!
Vložit
- čas přidán 1. 06. 2024
- The useState() Hooks is a crucial React Hook. But it's sometimes being used in situations where you actually don't need - and where you therefore shouldn't use it.
Because there are UX or performance benefits to be reaped when avoiding it in certain scenarios.
Learn all about React (discount applied): acad.link/reactjs
🖥️ Official Website & Courses
academind.com/courses/
💬 Academind Community
academind.com/community
👋 Social Media
/ maxedapps
/ academind_real
/ academind_real
/ academindchannel
/ maximilian-schwarzmueller
/ manuel-lorenz-808b5185
/ academind-gmbh
/ academind-pro
/ academind_real
00:00:00 - Introduction
00:00:33 - useState() Recap
00:01:27 - Using useRef() instead of useState()
00:03:12 - Alternative: Leveraging Built-in Browser Features
00:04:13 - React Deep Dive
00:04:57 - Alternatives: Store Information in URL (Query Params)
00:07:02 - Improvement: Sync State with localStorage
00:08:08 - Conclusion
I like your react course and your courses are always up to date and well explained. Thank you very much.
Nice catches Max. Your courses deserves each penny paid on it. Feel great about what you are doing. Thanks
best teacher i have seen in my life
I do wonder, how do you judge when to use which state management? Of course, you can use useState, useContext and useReducer, as well as custom hooks etc, but at which point do you shift to Redux/Zustand/Jotai or other alternatives?
Excellent approach to reduce DOM element kudos
using browser form api simplifies things, i knew about that in your react course, (form section). Your content is really awesome.
I feel react is a separate programming language, there is too much to learn in react. BTW does the browser form api works in react native too?
I have more than 5 years of experience in frontend specially React, but i neven though that we can things similar to useState, without useState. Thanks for this Max.
Seriously?
Jesus you never used useRef before? Never developed low level stuff in React before?
@@UwU-dx5hu I mean I have used most of these methods but never realized that they work similarly and could be used as an alternative to useState.
Or you can use a state mgmt library and decouple the state from the comp if you have complex async flows.
Thank you so much!
I have seen some websites where when you delete/clear the localstorage the website will auto reload.
Any idea how this is achieved?
Very nice explanation
In the previous scenario, we employed the useState hook for state management while interacting with localStorage. However, the objective was to illustrate an alternative method for state management without utilizing the useState hook.
Sweet, so store the password as url query parameter, got it 👌
Im a proud graduate of nextjs course of Max in Udemy last year. I successfully build business application for a client. and im so proud of it. One thing that i want to say is that im learning typescript right now to catch bugs before i ship it in production. i hope max add typescript to NextJS course and if there's an additional price, i'm willing to pay. it's hard to intergrade TS in nextjs. :( cant find a source that is clear explanation like Max does. I found a course by Mosh but damn its expensive. $149+
Truthfully, just reading the documentation should be enough to get you started. NextJs has some decent docs on how to implement TS.
@@cIappo896 can you provide me a link to it? I’d appreciate it. 🙏🏻
@@cIappo896 can you provide some links? I’d greatly appreciate it 🙏🏻
These all in one word: Remix 😌
You might not need React either...
You might not need a website
That's a good sentiment in theory. It's quite different trying to convince your manager that after spending 5 years of development in React it's time to rewrite it all into something else.
Yeah that's right next js is the new react alternative
@@manigr8esthuh? Next js is a framework based on react. How is it an alternative to react?
u may not need life
sir i love when you say "FOR EKSAAAAMPLE"
Same here
About forms: beside using FormData, we also could set one ref to form element. Every native form element that has name or id could be getter from form.elements.
For example we have input[name="firstName"], and formRef. We could get this input as formRef.current.elements.firstName or even formRef.current.firstName
Unfortunately with custom UI lib select it's not that good
What about IndexedDB? Is it good to use it? What are typical use cases for it?
Amazing, thnx!
The fact that the whole component is reevaluated on every keystroke when using useState makes me question whether React should still exist. This design choice is terrible.
Yoooo, I just want to learn react, but it keeps changing 😅
That's great; while you don't need the complicated forms, wizards, with depending fields on onto another.
And that's why any libs from like jquery till react/angular/vue/amount of others come to help us.
When I was learning react a few months ago, I was taught that you must not get the values of user input through form but you should bind them to a state and pass that state as value to the form input fields. But now you are saying completely contradictory things. I'm so confused..
The way that I learned how to handle form data in react was to do what the OP initially mentioned: store the data in state and use that to drive the UI and submission data.
This is completely acceptable as there is nothing wrong with it; data should be driving everything else. However, the point he's making is that for Form data, such as Inputs, you shouldn't need to use State to store it. Instead you can use useRef to get the Input DOM reference and then get the value from there; you're tapping into the actual DOM instead of using abstractions to store your data.
I hope this helped. Please ask if you need me to clarify further. :)
Welcome to React. What OP mentioned is the canonical way of dealing with forms using controlled fields. It keeps the state consistent at the cost of re-renders which way you do things is for your app to decide.
Will react be replaced by a better Library/Framework in the future?
That's hard to answer. There's already tons of libraries out that do things better than React, but they don't replace react. Unless you have a crystal ball, you can't know the answer; and React is plenty good as it is. It has some weird idiosyncrasies, but it's a leader in web dev for a reason.
@@cIappo896 I think React is only popular because it's what everyone is told to use/learn and so more organizations use it. It's certainly not my go-to if I have a choice.
The javascript world changes rapidly but I think React is here to stay for a while. I do predict that Nextjs will overshadow React more and more as time goes on...
Possibly not by other library but by AI, nowadays we can generate react code from figma
I am learning useState from your react course on udemy 😅😅😅😅
Hey, Ive 1 question
How can we make changes to another state upon changes of another state without using useEffect?
Let say, we have state_A and state_B.
If state_A changes value then only state_B will have its value changed without using useEffect( () => { update(state_B)}, [state_A] ) ... in class component, i believe you could use , this.setState({state_A: value},()=>{ update(state_B)}), how the same can be done in functional component
In the function that calls the 1st setState, you should just add the 2nd setState as well.
For instance, in an input element, you can pass onChange={(e) => { setState1(e.target.value); setState2(e.target.value) }}.
However, this is a bad practice. You should try to reduce the number of states you have.
I can't tell you exactly, but you can probably do well with just one state, especially if you're updating them to the same value.
Call setB() whenever/wherever setA() is called?
I wrote a custom useState hook a couple years ago that persists the state in localstorage as you update it. Lost the code now though otherwise I could share it.
All within the hook without the need to do getItem and setItem outside the state hook.
you are working in a rust course? 😟
you got maried!!! congrats! :D
Max is great but his course at academind is too expensive $149
Following the series "You might not", one of the more needed ever, "You might not need useEffect()!"
fuck! i am a child with react yet. Geat advice! Thank you!!!
What about react native?
in short we have to rid off the react and use vanila js
i am new in js almmost 3 days ago i started learning JS , how much time it take to learn react js etc , currently i;m learning js loop and functions
Depends upon your consistency
A human life is not enough for this challenge.
Bhai mere chup kar 🙏
Considering you've taken 3 days to reach loops and functions you're probably gonna take a while
I already had some experience programming so it didn't take too long
First master JS, everything else will come much easier after that
You should title your video "You might not need React"!
Hi, Sir with real-time projects there are no courses jest React unit test cases with in-depth knowledge. So Can you please do one course on udemy sir will learn from u please....
Rust lang PLEASE !!! :)
What do u thnik useSignal() ?
lolz. I'd rather use purejs
I dont understand why people still use forms...
forms were made to collect inputs and send http requests, why shouldn't they be user ?
@@thelostvorg7805
Bcos you are more vulnerable to csrf attacks, and you can do every thing form has to offer with more control and without been so rely on it
Update your udemy courses
The best practice in React is to not use React
Well, yes and no. If you are working in your personal projects it is ok to try new things.
If it is about a React project already in production I would not recomend mixing both "no React" and "React" approaches.
The React library is built / maintained by experienced software engineers and if that approach is not in the official documentation changes are high you will "shoot yourself in the foot".
In short: read the fkn React docs and thank me later.
react feels so outdated..
Hm, I don't feel like that - why would you say it is?
If you're comparing it to frameworks that are doing what React isn't, then which ones in particular are doing this?
I am a supporter of improving tech in our field, but React doesn't feel outdated to me; it still gets the job done with relative ease. That said, React is in need of attention for massive improvements. React Forget, when it's ready, will hopefully introduce a significant modernization that the library desperately needs along with other things. Can't wait!
@academind well for one, and the one that is more controversial, is the idea of wrapping your html in javascript as opposed to wrapping your javascript in html.
the second is the hooks are a paradigm and toolset that only exist for react and are not particularly intuitive and often times clunky
the third is having two sets of javascript functions to know. one for react and the other for native js.
the fourth is the developer experience. the idea of passing in components as props was always insane to me, and even though its optional, people still do it and, in my opinion, its hideous. but even with that aside, reading react code is not fun. you dont have separation of concerns so you have people putting css in weird places, jsx all over the place and then a whole lot of JS for basic things. Whatever you think of something like Svelte, the script block, style block, and html-like-templating is much easier to read
@eboodnero I like your answer. Thank you!
I do need to spend more time with Svelte and possibly Solid or Astro to see how they improve the development experience. That way I can give a better response.
I'm very much used to React and JSX, so it doesn't bother me too much. However, it's very easy to let your code get out of control. Some day that React is opinionated, but poor decisions can overrule such opinions that React has to the point of a bad application.
I remember when Hooks came out. I was pleased as I thought they were really going to help, but over time I found myself using them less and less in lieu of smarter, simpler development. Now with RSC and Server Components in Next, the only Hook that I find myself using when doing use client is maybe useState. Less is more.
I feel like the things you're talking about (half of them, actually) come down to how poorly developers leverage React. Passing down components has always seemed like a bad idea to me and I've avoided that as much as I could. Separation of components and controllers keeps things in line and simple. So, in a way, I agree with your sentiments because a lot of people seem to misuse or abuse what React offers them.
@@irlshrek To be honest, you do have a point; but only in some cases. I for one can't stand the Svelte syntax. React is much more readable to me.
Also, most frameworks and libraries introduce their own functions; if they don't, they're just kinda pointless because you're getting bloat.
Hooks are just fine; languages don't need to be identical to already existing ones to be good.
All of the last issue is solved by working with *good* react devs.
i am from INDIA , please make a video how can we create react app using the bun create-vite , please make a full tutorial
bun create vite@latest
(Enter project name)
cd {project-name}
bun install
bun run dev
There you go, no tutorial needed
Man I hate react
Form submition is not a good example, if you are using React / Next you should always use Hook Form.
No, you definitely not always use that. Use whatever works for you. And there's nothing wrong with keeping it simple if no extra complexity is needed.
I don't agree. Libraries are good to use for simplicity, but they also add a layer of abstraction that don't necessarily indicate an ideal solution.
You can technically use the native FormData to retrieve your form data (ha ha). This explanation is more about not needing to have useState to support your form data collection. React Hook Form can help with form data, validation, etc. I like using it, to be fair.
I use RHF in the project that is basically running a 40k employee company. I'll be the 1st one to tell you, RHF is not always the solution. There are things that make it incredibly annoying. It's a good solution, makes development faster, but it's also quite heavy.
@@cIappo896 like anything, I suppose. There's no be-all end-all solution. I may enjoy React, but I won't tell people that's always the solution. Some deem it to be overkill, others will say it's underpowered. Same with RHF.
Software development has come a long way, but humans create it and we tend to complicate things. So, it's still not close to perfect. ;)
@@incarnateTheGreatYeah, I see that the only people that say that you "must" do something are people without experience. I've been working as a dev for about 4 years, and it's still hard to evaluate whether I need something or not lmao
Your course is too long 😢. Make it short and crisp 😊. I would not take any single course more than 20 hours.
Hi, How does he getting whole line of code in suggestions? Is there any extensions that helps him?
@Academind, can you please tell.
By the way, videos is awesome. Learnt new things.
It's GitHub copilot
Over-react-ed devs: NO! You should to control user's every breath and blink 🫠