Load More Pagination React

Рет қаралды 27,490

Күн бұрын

Udemy Courses:
- 9 React Projects on Udemy - bit.ly/2D83M8c
- 9 React Projects on Gumroad - h3webdevtuts.g...
Social Media:
- Web Dev Discord - / discord
- Github - github.com/h3h394
- Twitter - / h3webdeveloper
- Instagram - / h3webdevtuts
Project Details:
API - jsonplaceholde...

Пікірлер: 104

@elendil4543 3 жыл бұрын

Great trick but it doesn't serve the main purpose of pagination which is limiting the returned records from database and load the page quicker from the user perspective, this method actually will receive all records from your database which is not healthy for your website if it is medium scaled or above ( I won't talk about fact that you will call all records again and again with every api call )

@h3webdevtuts 3 жыл бұрын

Hi, yes you are totally right, this tutorial is not intended for that in any way, you wouldn't ever do it this way with having a database. This was just a simple trick for small data people might have / local data mostly. Thanks for watching :)

@elendil4543 3 жыл бұрын

@@h3webdevtuts actually I used your trick recently for one of my projects and it was really helpful, thank you very much

@h3webdevtuts 3 жыл бұрын

@@elendil4543 Glad I could help. Thanks for watching :)

@olenakunina1 2 ай бұрын

kinda feel sorry for all those "aiii....that is exactly what i was needed!!!!!!!!!!!" - agree very confusing content, i would say even harmful, let them all put those buttons to portfolio projects)))))))))))))))

@bernarduslopez7074 3 жыл бұрын

i never thought it'd be so simple.. great tutorial 👍

@h3webdevtuts 3 жыл бұрын

Thank you so much :)

@newcode7847 2 жыл бұрын

Great tutorial, helped me finish my work task! Thanks a lot!

@h3webdevtuts 2 жыл бұрын

Glad I could help. Thanks for watching :)

@canerkuru9681 2 жыл бұрын

Absolutely one of the best coding techniques I've ever seen. Brilliant brilliant!

@h3webdevtuts 2 жыл бұрын

Glad you like it, much appreciated. Thanks for watching :)

@wisdomelue 2 жыл бұрын

simple and precise, exactly what i needed thank you!

@h3webdevtuts 2 жыл бұрын

Glad you found it useful. Thank you :)

@Dima-j6i 2 ай бұрын

@@h3webdevtuts Hello. Please tell me, if I want to apply your method to several components, how can I make sure that when the 'showMoreItems' function fires in one component, it does not work in others? I simply pass State and function from parent to child.

@almahmud5569 3 жыл бұрын

very useful! never thought it will be this much easy

@h3webdevtuts 3 жыл бұрын

Glad you found it useful. Thank you :)

@rafiqjarjous7542 3 жыл бұрын

thanks boss! its me Vampie from the discord server :D

@h3webdevtuts 3 жыл бұрын

Thank you Vampie :D

@marcelo_anselmo_levy 3 жыл бұрын

Easy and simple as can be! Thanx mate

@h3webdevtuts 3 жыл бұрын

Glad you liked it, thank you so much :)

@aloysius9037 2 жыл бұрын

bro that was amazing thanks

@h3webdevtuts 2 жыл бұрын

Thanks :)

@jeetsingh-sy5ij 2 жыл бұрын

Thank you very much! This is very much helpful for me. I haven't reached to useEffect yet! but I am on useState, I know how to map and Items or create element on click and I was thinking how to limit the data and also how to show more data on click. I will try to implement with only useState if it's possible, I learnt something new again! Thank you mate!

@h3webdevtuts 2 жыл бұрын

Hey, I'm glad you found it useful. I would agree, keep learning, keep making new things, you are doing great! Thanks for watching :)

@promiseshedrach7836 3 жыл бұрын

Thank you very much @h3webdevtuts for this it was really helpful

@h3webdevtuts 3 жыл бұрын

Hey, I'm really glad you found it helpful. Thank you for the kinds words :)

@fcandann 3 жыл бұрын

Thanks a lot! Fast & good tutorial!

@h3webdevtuts 3 жыл бұрын

Glad you liked it. Thanks for watching :)

@maaz-a-3578 5 ай бұрын

اقسم بالله برنس راجل مية المية حبيب قلبي والله

@farhanalfariqi6778 3 жыл бұрын

Absolutely Brilliant!!

@h3webdevtuts 3 жыл бұрын

Glad you found it useful. Thank you so much for the kind words :)

@raba650 3 жыл бұрын

Needed to watch a react rendition of this functionality since I want to implement that for the npm wix pro gallery which uses redux so now I have to convert it to redux as well. Thanks.

@h3webdevtuts 3 жыл бұрын

Hope that this helped and that u got the rest figured out. Thanks for watching :)

@Metovski Жыл бұрын

thanks man. i appreciate

@cury0224 2 жыл бұрын

It's was so simple!!! Thank you!!!

@h3webdevtuts 2 жыл бұрын

Thank you :)

@Codelab-ql3xh 2 ай бұрын

thanks a lot, brother

@robotoidgaming9422 3 жыл бұрын

Thank You, Bro. You help a lot

@h3webdevtuts 3 жыл бұрын

You are welcome. Thanks for watching :)

@marufaaktereity2976 2 жыл бұрын

Thank u so much

@h3webdevtuts 2 жыл бұрын

Thank you :)

@DeepakSingh-eq8jl 10 ай бұрын

simple and nice what i exactly needed. thanks Alot ! man

@willyelinge 3 жыл бұрын

Thanks, this video was really useful for me.

@h3webdevtuts 3 жыл бұрын

Glad you found it useful. Thanks for watching :)

@truongnguyen-bh8vn 2 жыл бұрын

Thanks !

@h3webdevtuts 2 жыл бұрын

Thank you :)

@baybay1904 2 жыл бұрын

that's cool sir, thank you so much 🙏

@h3webdevtuts 2 жыл бұрын

Thank you :)

@nazmulhudarimon4416 3 жыл бұрын

Thanks mate. Thanks a lot

@h3webdevtuts 3 жыл бұрын

Glad you found it useful. Thank you :)

@sachinsenakulk 2 жыл бұрын

Awesome 😎👏👏

@h3webdevtuts 2 жыл бұрын

Thank you :)

@gapobohorc 3 жыл бұрын

Čuje se iz avijona, da si neki naš :) hvala za ovaj odlićan video.Pozdrav iz Slo

@h3webdevtuts 3 жыл бұрын

Hvala tebi druze. Pozdrav :)

@varunsingh2133 2 жыл бұрын

can you please help me like if want only 10 items what should i do

@h3webdevtuts 2 жыл бұрын

I'm not sure what you are trying to do, can you explain more on this? Thanks for watching :)

@brenosantin9739 2 жыл бұрын

youre the boss!!!! great video helped me a lot!

@h3webdevtuts 2 жыл бұрын

Thank you so much :)

@mudassirsayed8703 Жыл бұрын

How to hide the Load more when it reaches to the end of the data

@tunayuzbayyelce3455 Жыл бұрын

Thanks a lot!!

@ericholdridge4102 3 жыл бұрын

Ayyyyye, the slice method.

@h3webdevtuts 3 жыл бұрын

Just for you :D

@Codelab-ql3xh 2 ай бұрын

thanks a lot, bro

@shubhamsaxena6412 3 жыл бұрын

you r awesome , and expalined very well

@shubhamsaxena6412 3 жыл бұрын

it would be more helpful if you attach the codeSandBox link or upload the code at github . So that people can run the code

@h3webdevtuts 3 жыл бұрын

@@shubhamsaxena6412 Yeah, most of the time I remove the projects after they are done so that's the main reason. But I will see to improve that in the future. Thanks for watching :)

@Code-With-Shakil Жыл бұрын

Thanks for your video , this was really helpful for me .

@toshitsingh7270 Жыл бұрын

Thanks for the video, super easy and on point. It helped a lot ❤

@SLHacks Жыл бұрын

very good!

@alexkey9372 3 жыл бұрын

Thanks but how would you do that if the api supports the pagination e.g www.apiurl.com/?per_page=2&currPage=1 ? would you simply push new data to array and re-render? As I understand, this returns all JSON data in useEffect.

@h3webdevtuts 3 жыл бұрын

Are you trying to do the same thing as here or something different? This example gets all the items at once, but in your link you know how many items u have because of per page param, so based on that number u can see how many items ur gonna show.

@rezwanatcha Жыл бұрын

Great tutorial, but is there a way to hide the load more button if there is no more content to load?

@tj-softwaresolution Жыл бұрын

how is it possible to set the focus on the new posts so that you do not have to scroll?

@user-uz9me3nb6n 2 ай бұрын

You can use the window.scrollTo function which takes 2 arguments X and Y

@tj-softwaresolution 2 ай бұрын

yeah makes sense. thanks bro

@ldstudio3044 3 жыл бұрын

Thank you Bro :)

@h3webdevtuts 3 жыл бұрын

Thank you :)

@learnwithvigneshvijayakumar 2 жыл бұрын

Great content.Really informative.

@h3webdevtuts 2 жыл бұрын

Glad you found it useful. Thank you :)

@rargza9169 2 жыл бұрын

thank youuuuuuuuuuuuu

@h3webdevtuts 2 жыл бұрын

Thank you :)

@MujahidulIslam 5 ай бұрын

thank you

@arezkiait_1171 2 жыл бұрын

very helpful , thank u :)

@h3webdevtuts 2 жыл бұрын

Thank you :)

@user-hb2qi2je4e 3 жыл бұрын

hi! Good content!!

@h3webdevtuts 3 жыл бұрын

Hi, much appreciated :)

@ahmad_mido 2 жыл бұрын

can you please make it with pure javascript?

@h3webdevtuts 2 жыл бұрын

Might do it in the future. Thanks for watching :)

@user-ne1fh6eu4r 3 жыл бұрын

thank you :)

@h3webdevtuts 3 жыл бұрын

Thank you :)

@fahimx1426 Жыл бұрын

Great bro :)))

@shujathaliirfan2662 3 жыл бұрын

Super

@h3webdevtuts 3 жыл бұрын

Thank you :)

@suatbayrak2703 3 жыл бұрын

great idea thanks for the tutorial

@h3webdevtuts 3 жыл бұрын

Glad you liked it, thank you for watching :)

@cazterk 3 жыл бұрын

Easy does it

@h3webdevtuts 3 жыл бұрын

Glad you found it useful. Thanks for watching :)

@aihacker42 Жыл бұрын

Add code link direct in video description please😄

@Muviz Жыл бұрын

Можно на русском, очень сильный акцент

@copeseethe8794 Жыл бұрын

Thanks

@LeonardoMoyano 3 жыл бұрын

Thanks a lot!!

@h3webdevtuts 3 жыл бұрын

You are welcome. Thanks for watching :)

@JoinMeInLearning 3 жыл бұрын

Thank you Bro :)

@h3webdevtuts 3 жыл бұрын

You're welcome, thanks for watching :)