You're the first guy I recommend to anyone I know when we come to programming staff, I question I this you can return your loader with a defer like return defer({ value: somethingHere }); can you do a video on that too please.
Wow, React has evolved, the loader function is one of the feature Sveltekit provides, it fetches data and render right before component mounted, this way we get better user experience because we don't need a loader indication and user won't see empty content. I think React is pushed to Server side render way, all these popular frontend frameworks has SSR capability right now in order to survive, because meta-frameworks such as Sveltekit, Next, Nuxt, Remix are taking over, it is good to know we can do this with React 😘
I've been following your other videos and it really helped me have a better understanding of how react router works. Regrading loaders I think you missed one fundamental concept here, which is the wait time. Since you're loading your data from a static file there's no wait time. Using this loader approach when calling actual api's there would be a delay before the page renders. With the useeffect you can handle that delay by adding a spinner or something, informing the user that the page is loading. Is there a way to do that with the loader?
I have a couple of questions? 1) What if data fetching take some time?, how can we add spinner ? 2) how to use data in other pages? Cuz fetching data everytime is a bad practice. (I think if we dispatch an action or setState in the rendered component then it can work otherwise we can't use hooks and rtk outside the react component) 3.Can useLoader completely replace useEffect in data fetching?
That's a really great lesson course and easy to understand, good job Sir 🤩🤩. It'd be a salvation if you could make a tutotial on how to host a React App, as you are using react-router-dom hook. I am struggling on something called Client Side Rendering & Server Side Rendering (which returns a 404 page not found, in my case). Would appreciate, Sir ✨✨
Sir for this loader async function we use await but there is no try catch block.. What if the route localhost:4000/careers cannot be found ie it throws an error, will the react router automatically render the error element?
Alternatively, you could put this in `your package.json` scripts section: `"start-db": "npx json-server --watch data/db.json --port 4000"` . To call it, just do: `npm run start-db`
I watched the whole tutorial. Thank you!! Loaders seem to work well for /componentA/componentB/:id. My data, however, is dynamic so I cannot point to :id as the id may change as the data changes. So my path ended up /loader where useEffect loads the data into session memory then redirects to /componentA which reads the data from session memory. I could also useContext, but session memory works for now. Just pointing this out for others since it took me a while to realize it. Once you redirect all the state and params are gone!
I am trying to use useLoaderData in the other page, but the result is being read as 'undefined'. Does this mean that useLoaderData can be used only in the route component in which loader has been used. If yes, then how can I use the result returned in the other page? 🙏
It would be much nicer if you could put any hooks inside loader. Now for example im wondering how the heck use lodaing screen while loader is fetching data :D
Complete beginner here, but if you used useEffect to call the API, wouldn't it still need to call the API and fetch data from the server every time the career page is accessed?
Does anyone know how to use useContext in a loader function? I need to access some data in my global context but apparently you can't use hooks outside of a React component.
It's impossible for the moment, or at least it's not suppose to be used there, router developers stated that loaders and actions was introduced in order to decouple fetching data and rendering, however there is voting to introduce this functionality like element: ... loader: ... context: ...
I am stil not sure why that hook is made, we can just make the same behaviour with useEffect. also what if it is used in real world where upload and download speed is a thing, there is no mentioned way to tell the user that "the app is not frozen but we are downloading something", while using useEffect everybody know how to handle it.
is this possible to call multiple loaders, passing the redux store? ...... { path: "overview", element: , loader: [viewLoader(store), viewWorkLoader(store)], } .......
add "proxy": "localhost:4000/" in your package.json file. In your careers loader function use a relative path in your fetch command ('/careers') is stead of the whole domain path.
I really appreciate when the tutorials are up to date. Pls keep the good job
I am following a course on CodecAdemy but for many parts I am also watching your tutorials which are explaining it a lot better!
I'm just enjoying and learning. Super perfect. Thanks 1.000.000 times.
you are just master of all code i got all i need for the semester in just you 1 series of video thanks a lot your are really being helpful
You're the first guy I recommend to anyone I know when we come to programming staff,
I question I this you can return your loader with a defer like
return defer({ value: somethingHere });
can you do a video on that too please.
Wow, React has evolved, the loader function is one of the feature Sveltekit provides, it fetches data and render right before component mounted, this way we get better user experience because we don't need a loader indication and user won't see empty content. I think React is pushed to Server side render way, all these popular frontend frameworks has SSR capability right now in order to survive, because meta-frameworks such as Sveltekit, Next, Nuxt, Remix are taking over, it is good to know we can do this with React 😘
but it doesn't provide cache and other features like react-query and swr right?
thanks for the tutorial , now my search bar works just fine with this loader method
Perfectly explained❤ Better than the paid course I’m following😂
Thanks Michael! :) more at NetNinja.dev
Thank you You are my favourit teacher!💓
Wow, thank you! :) that means a lot
I've been following your other videos and it really helped me have a better understanding of how react router works. Regrading loaders I think you missed one fundamental concept here, which is the wait time. Since you're loading your data from a static file there's no wait time. Using this loader approach when calling actual api's there would be a delay before the page renders. With the useeffect you can handle that delay by adding a spinner or something, informing the user that the page is loading. Is there a way to do that with the loader?
use Suspense or state from useNavigation hook provided by React Router. let me know if this helped
@@aymanechaaba Suspense component might help with his case as you mentioned
Very nice tutorial about "React Router"! Hope you can make a series tutorials about "Remix Run" of React!
Can't wait for you to do a SvelteKit 1.0 course, now that its officially released 😀👍
I have a couple of questions?
1) What if data fetching take some time?, how can we add spinner ?
2) how to use data in other pages?
Cuz fetching data everytime is a bad practice.
(I think if we dispatch an action or setState in the rendered component then it can work otherwise we can't use hooks and rtk outside the react component)
3.Can useLoader completely replace
useEffect in data fetching?
I wish someone who knows the answers would have respond to you... 🧐
I have the same question as you
That's a really great lesson course and easy to understand, good job Sir 🤩🤩. It'd be a salvation if you could make a tutotial on how to host a React App, as you are using react-router-dom hook. I am struggling on something called Client Side Rendering & Server Side Rendering (which returns a 404 page not found, in my case). Would appreciate, Sir ✨✨
Sir for this loader async function we use await but there is no try catch block.. What if the route localhost:4000/careers cannot be found ie it throws an error, will the react router automatically render the error element?
Actual information starts at 4:34
@3:41 does not work for me. Put up a comment but was deleted?
Amazing 😍. Just at the right time
Hope it's helpful Taofeek!
How do you handle server errors with the useLoder hook?
Loader can be used with custom hook?
Nope, it can't, it fetches data and render before dom mounted, it works kind of like sever side render.
@@maskman4821 ok, thank you!
i tried to use it with ContextAPI but i got an error saying ( i can't use 'useLoaderData' outside of a route ). suks but understandable
the end point created automatically but how it got the /careers from where it got this
is there any way to have reduxTK deal with the request? like maybe dispatching an action from within careersLoaded? (~ @3:30) would that work?
Alternatively, you could put this in `your package.json` scripts section: `"start-db": "npx json-server --watch data/db.json --port 4000"` . To call it, just do: `npm run start-db`
Is loader worth using over useeffect except the memory it saves us?
I watched the whole tutorial. Thank you!! Loaders seem to work well for /componentA/componentB/:id. My data, however, is dynamic so I cannot point to :id as the id may change as the data changes. So my path ended up /loader where useEffect loads the data into session memory then redirects to /componentA which reads the data from session memory. I could also useContext, but session memory works for now. Just pointing this out for others since it took me a while to realize it. Once you redirect all the state and params are gone!
Your are the best on RUclips
is loader replaces useEffect hooks? I don't understand when to use loader function exactly can anyone explain?
Can you use the useLoaderData hook in subroutes and treat it as a sort of context for all child routes?
I think useLoaderData should work with that, is also included with React router 6
userouteloaderdata(routeId) does this
Why are you using Loaders to fetch data and not useEffect?
Does the loader function make useState and useEffect ways of fetching data sort of obsolete??
I think the same!
but what about error? what if error generate while making api req?
Is this a good idea to put my authentication in the loader fn?
Please how do I use ds for firebase authentication since i can't use hooks with ds
I am trying to use useLoaderData in the other page, but the result is being read as 'undefined'. Does this mean that useLoaderData can be used only in the route component in which loader has been used. If yes, then how can I use the result returned in the other page? 🙏
useFetcher()
It would be much nicer if you could put any hooks inside loader. Now for example im wondering how the heck use lodaing screen while loader is fetching data :D
There is no outlet component specified .
how can i pass data to the loader fun?
Isn't it a bad practice to fetch data from server every time we go to career page? Isn't it better to fetch it once with useEffect hook?
Complete beginner here, but if you used useEffect to call the API, wouldn't it still need to call the API and fetch data from the server every time the career page is accessed?
No don’t optimise prematurely
Please create a Playlist about "Creating E-Commerce Website using Strapi , MongoDB, React , and Stripe"
Hi
I did all the steps but I'm getting this error :
Failed to fetch
Failed to load resource: net::ERR_CONNECTION_REFUSED
What should I do?
thx
Try to add some latency and you will be wondered with this approach
Does anyone know how to use useContext in a loader function? I need to access some data in my global context but apparently you can't use hooks outside of a React component.
It's impossible for the moment, or at least it's not suppose to be used there, router developers stated that loaders and actions was introduced in order to decouple fetching data and rendering, however there is voting to introduce this functionality like element: ... loader: ... context: ...
Does anyone know how should I combine a React Router and RTK Query?
RTK Query creates a Hook, should I use that hook on my loader function?
Thx
♥️♥️✌🏻
Elooo. I think we could abandon react router, and turn our attention to tanstack.
Awesome video +++++++++++ 😀
so good
9:30
I am stil not sure why that hook is made, we can just make the same behaviour with useEffect.
also what if it is used in real world where upload and download speed is a thing, there is no mentioned way to tell the user that "the app is not frozen but we are downloading something", while using useEffect everybody know how to handle it.
is this possible to call multiple loaders, passing the redux store?
......
{
path: "overview",
element: ,
loader: [viewLoader(store), viewWorkLoader(store)],
}
.......
I'm getting
"assignment to undeclared variable res" when i click on the careers link. Am i missing something? @NetNinja
Anyone else getting """ Unhandled Thrown Error! -
NetworkError when attempting to fetch resource. """ when entering localhost:3000/careers ?
powershell Set-ExecutionPolicy -Scope "CurrentUser" -ExecutionPolicy "RemoteSigned"
@@flyflor599 for some reason it does not work for me. it just says command not found
getting same error output to browser, no errors in the terminal
add "proxy": "localhost:4000/" in your package.json file. In your careers loader function use a relative path in your fetch command ('/careers') is stead of the whole domain path.
use npx before the command he typed