Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Already a member? Sign in to continue

Playing

50. Debouncing search

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

Let's figure out our problem that we've got where every time we type something, we send a request through to our back end. Now we're going to solve this using debouncing. Debouncing is the ability to delay the execution of a function based on a specific time.

00:16

All that means is that when we type something, we can delay actually sending the request by, say, half a second. So the user won't notice too much difference. But as they type, we will then make a search

00:29

after they have basically lifted their fingers off the keyboard. So let's go ahead and look at how we are going to do this. The first thing that we're going to do is take out the reload that we've got here and add this into a separate function, which we can then debounce.

00:44

So let's say handle search input. And let's go ahead and put this into a function. And we're just going to go ahead and invoke this into here, passing in the query and then, of course, accepting the query into here.

00:58

So that should still work. If we look for view, still works. Now we're going to go ahead and use a lodash debounce. We've already pulled in a lodash package already,

01:07

so we should know how to use these. Let's go ahead and install that. And let's go up to the top and just import this. So let's go ahead and pull debouncing from lodash debounce.

01:20

And then to get this to work, all we need to do really is wrap this function in that debounce call. So let's do that. And then we're going to choose a time.

01:32

So let's start with a second, just so we can see how this works. Let's go back over to our app. And let's keep an eye on our network requests. I'm going to type in view.

01:46

And then sure enough, a second later, that goes ahead and performs the search. So it still works, but we have a slight delay. And notice we've only sent out view. We haven't sent out v, u, and e in the search query.

01:59

Now, we can easily bump this down a little bit. And you can see that the functionality will still work as expected. So it still works. If we're a little bit slower at typing, we're going to send down a lot more requests.

02:12

But you can see we're not sending it down for every single character necessarily. I think 500 milliseconds is a good balance here, just depending on how fast user types. But let's search for Laravel.

02:25

And you can see, obviously, I made a mistake. So I backspaced and it sent two requests. But sure enough, that's better than sending a request for every single character in this word or phrase.

02:36

So there we go. We're now searching nicely. The delay here isn't too much. But we are not sending now a huge amount of requests to Laravel and slowing things down.

Episode summary

In this episode, we tackle a pretty common problem in search functionality—making sure your app doesn't send a backend request every single time you type a letter. That can get crazy really fast! To fix this, we dive into debouncing, which basically just means we make our search wait a moment before actually firing off a request, giving users a chance to finish typing.

We start by refactoring our code, moving the search logic into a dedicated handler function that we'll later debounce. Then, we pull in Lodash's handy debounce function and wrap our search handler, playing around with debounce timings. At first, we try a full second—just to see how it feels—then drop it to a more natural 500ms delay. With this setup, typing triggers just one request after the user pauses, instead of a flood of network calls with every keystroke.

We test things out, watch the network tab, and confirm everything still works, but with far fewer requests and no real loss in responsiveness. Debugging a typo shows an extra request or two when correcting, but that's still way better than before. In the end, our search feels smooth, and our backend breathes a whole lot easier!

Episode discussion

No comments, yet. Be the first!