{"action":"created","comment":{"url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments/152063004","pull_request_review_id":77865444,"id":152063004,"diff_hunk":"@@ -177,3 +177,52 @@ class Alphabet extends React.Component {\n   }\n }\n ```\n+\n+### How can I prevent a function from being called too quickly or too many times in a row?\n+\n+If you have an event handler such as `onClick` or `onScroll` and want to prevent the callback from being fired too quickly, you can wrap the handler with a utility such as [`_.debounce`](https://lodash.com/docs#debounce) or [`_.throttle`](https://lodash.com/docs#throttle). For a given `delay`, say `100ms`, debouncing calls the handler after activity stops for that amount of time; throttling prevents the handler from being called more than once per `delay`. See a visualization [here](http://demo.nimius.net/debounce_throttle/).\n+\n+#### Throttle\n+\n+```jsx\n+import { throttle } from 'lodash'\n+\n+class LoadMoreButton extends React.Component {\n+  handleClick = throttle(() => {\n+    this.props.loadMore()\n+  }, 100)\n+\n+  render() {\n+    return <button onClick={this.handleClick}>Load More</button>\n+  }\n+}\n+```\n+\n+#### Debounce\n+\n+```jsx\n+import { debounce } from 'lodash'\n+\n+class Searchbox extends React.Component {\n+  handleChange = event => {\n+    event.persist()","path":"content/docs/faq-functions.md","position":32,"original_position":32,"commit_id":"44e5f6a1ddc19da6d6112df9b33dba3b90f91dd6","original_commit_id":"44e5f6a1ddc19da6d6112df9b33dba3b90f91dd6","user":{"login":"bvaughn","id":29597,"avatar_url":"https://avatars0.githubusercontent.com/u/29597?v=4","gravatar_id":"","url":"https://api.github.com/users/bvaughn","html_url":"https://github.com/bvaughn","followers_url":"https://api.github.com/users/bvaughn/followers","following_url":"https://api.github.com/users/bvaughn/following{/other_user}","gists_url":"https://api.github.com/users/bvaughn/gists{/gist_id}","starred_url":"https://api.github.com/users/bvaughn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bvaughn/subscriptions","organizations_url":"https://api.github.com/users/bvaughn/orgs","repos_url":"https://api.github.com/users/bvaughn/repos","events_url":"https://api.github.com/users/bvaughn/events{/privacy}","received_events_url":"https://api.github.com/users/bvaughn/received_events","type":"User","site_admin":false},"body":"Maybe we should add an inline comment here pointing to:\r\nhttps://reactjs.org/docs/events.html#event-pooling\r\n\r\nAlso might be nicer to just pass `event.target.value` to the debounced handler, rather than the whole event, so we don't tie up pooled events unnecessarily.","created_at":"2017-11-20T17:49:42Z","updated_at":"2017-11-20T17:52:21Z","html_url":"https://github.com/reactjs/reactjs.org/pull/305#discussion_r152063004","pull_request_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/305","author_association":"CONTRIBUTOR","_links":{"self":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments/152063004"},"html":{"href":"https://github.com/reactjs/reactjs.org/pull/305#discussion_r152063004"},"pull_request":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/305"}}},"pull_request":{"url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/305","id":153544786,"html_url":"https://github.com/reactjs/reactjs.org/pull/305","diff_url":"https://github.com/reactjs/reactjs.org/pull/305.diff","patch_url":"https://github.com/reactjs/reactjs.org/pull/305.patch","issue_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/305","number":305,"state":"open","locked":false,"title":"Add debounce and throttle examples for event handlers","user":{"login":"alexkrolick","id":1571667,"avatar_url":"https://avatars3.githubusercontent.com/u/1571667?v=4","gravatar_id":"","url":"https://api.github.com/users/alexkrolick","html_url":"https://github.com/alexkrolick","followers_url":"https://api.github.com/users/alexkrolick/followers","following_url":"https://api.github.com/users/alexkrolick/following{/other_user}","gists_url":"https://api.github.com/users/alexkrolick/gists{/gist_id}","starred_url":"https://api.github.com/users/alexkrolick/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexkrolick/subscriptions","organizations_url":"https://api.github.com/users/alexkrolick/orgs","repos_url":"https://api.github.com/users/alexkrolick/repos","events_url":"https://api.github.com/users/alexkrolick/events{/privacy}","received_events_url":"https://api.github.com/users/alexkrolick/received_events","type":"User","site_admin":false},"body":"","created_at":"2017-11-20T05:02:12Z","updated_at":"2017-11-20T17:52:21Z","closed_at":null,"merged_at":null,"merge_commit_sha":"bd4d28a7a5a1ac943f4423b21a749fe503d1a50e","assignee":null,"assignees":[],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/305/commits","review_comments_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/305/comments","review_comment_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments{/number}","comments_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/305/comments","statuses_url":"https://api.github.com/repos/reactjs/reactjs.org/statuses/44e5f6a1ddc19da6d6112df9b33dba3b90f91dd6","head":{"label":"alexkrolick:add-debounce-throttle-examples","ref":"add-debounce-throttle-examples","sha":"44e5f6a1ddc19da6d6112df9b33dba3b90f91dd6","user":{"login":"alexkrolick","id":1571667,"avatar_url":"https://avatars3.githubusercontent.com/u/1571667?v=4","gravatar_id":"","url":"https://api.github.com/users/alexkrolick","html_url":"https://github.com/alexkrolick","followers_url":"https://api.github.com/users/alexkrolick/followers","following_url":"https://api.github.com/users/alexkrolick/following{/other_user}","gists_url":"https://api.github.com/users/alexkrolick/gists{/gist_id}","starred_url":"https://api.github.com/users/alexkrolick/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexkrolick/subscriptions","organizations_url":"https://api.github.com/users/alexkrolick/orgs","repos_url":"https://api.github.com/users/alexkrolick/repos","events_url":"https://api.github.com/users/alexkrolick/events{/privacy}","received_events_url":"https://api.github.com/users/alexkrolick/received_events","type":"User","site_admin":false},"repo":{"id":106066067,"name":"reactjs.org","full_name":"alexkrolick/reactjs.org","owner":{"login":"alexkrolick","id":1571667,"avatar_url":"https://avatars3.githubusercontent.com/u/1571667?v=4","gravatar_id":"","url":"https://api.github.com/users/alexkrolick","html_url":"https://github.com/alexkrolick","followers_url":"https://api.github.com/users/alexkrolick/followers","following_url":"https://api.github.com/users/alexkrolick/following{/other_user}","gists_url":"https://api.github.com/users/alexkrolick/gists{/gist_id}","starred_url":"https://api.github.com/users/alexkrolick/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexkrolick/subscriptions","organizations_url":"https://api.github.com/users/alexkrolick/orgs","repos_url":"https://api.github.com/users/alexkrolick/repos","events_url":"https://api.github.com/users/alexkrolick/events{/privacy}","received_events_url":"https://api.github.com/users/alexkrolick/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/alexkrolick/reactjs.org","description":"The React documentation website","fork":true,"url":"https://api.github.com/repos/alexkrolick/reactjs.org","forks_url":"https://api.github.com/repos/alexkrolick/reactjs.org/forks","keys_url":"https://api.github.com/repos/alexkrolick/reactjs.org/keys{/key_id}","collaborators_url":"https://api.github.com/repos/alexkrolick/reactjs.org/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/alexkrolick/reactjs.org/teams","hooks_url":"https://api.github.com/repos/alexkrolick/reactjs.org/hooks","issue_events_url":"https://api.github.com/repos/alexkrolick/reactjs.org/issues/events{/number}","events_url":"https://api.github.com/repos/alexkrolick/reactjs.org/events","assignees_url":"https://api.github.com/repos/alexkrolick/reactjs.org/assignees{/user}","branches_url":"https://api.github.com/repos/alexkrolick/reactjs.org/branches{/branch}","tags_url":"https://api.github.com/repos/alexkrolick/reactjs.org/tags","blobs_url":"https://api.github.com/repos/alexkrolick/reactjs.org/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/alexkrolick/reactjs.org/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/alexkrolick/reactjs.org/git/refs{/sha}","trees_url":"https://api.github.com/repos/alexkrolick/reactjs.org/git/trees{/sha}","statuses_url":"https://api.github.com/repos/alexkrolick/reactjs.org/statuses/{sha}","languages_url":"https://api.github.com/repos/alexkrolick/reactjs.org/languages","stargazers_url":"https://api.github.com/repos/alexkrolick/reactjs.org/stargazers","contributors_url":"https://api.github.com/repos/alexkrolick/reactjs.org/contributors","subscribers_url":"https://api.github.com/repos/alexkrolick/reactjs.org/subscribers","subscription_url":"https://api.github.com/repos/alexkrolick/reactjs.org/subscription","commits_url":"https://api.github.com/repos/alexkrolick/reactjs.org/commits{/sha}","git_commits_url":"https://api.github.com/repos/alexkrolick/reactjs.org/git/commits{/sha}","comments_url":"https://api.github.com/repos/alexkrolick/reactjs.org/comments{/number}","issue_comment_url":"https://api.github.com/repos/alexkrolick/reactjs.org/issues/comments{/number}","contents_url":"https://api.github.com/repos/alexkrolick/reactjs.org/contents/{+path}","compare_url":"https://api.github.com/repos/alexkrolick/reactjs.org/compare/{base}...{head}","merges_url":"https://api.github.com/repos/alexkrolick/reactjs.org/merges","archive_url":"https://api.github.com/repos/alexkrolick/reactjs.org/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/alexkrolick/reactjs.org/downloads","issues_url":"https://api.github.com/repos/alexkrolick/reactjs.org/issues{/number}","pulls_url":"https://api.github.com/repos/alexkrolick/reactjs.org/pulls{/number}","milestones_url":"https://api.github.com/repos/alexkrolick/reactjs.org/milestones{/number}","notifications_url":"https://api.github.com/repos/alexkrolick/reactjs.org/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/alexkrolick/reactjs.org/labels{/name}","releases_url":"https://api.github.com/repos/alexkrolick/reactjs.org/releases{/id}","deployments_url":"https://api.github.com/repos/alexkrolick/reactjs.org/deployments","created_at":"2017-10-07T02:30:49Z","updated_at":"2017-10-07T02:30:51Z","pushed_at":"2017-11-20T05:03:22Z","git_url":"git://github.com/alexkrolick/reactjs.org.git","ssh_url":"git@github.com:alexkrolick/reactjs.org.git","clone_url":"https://github.com/alexkrolick/reactjs.org.git","svn_url":"https://github.com/alexkrolick/reactjs.org","homepage":"https://reactjs.org/","size":63903,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"reactjs:master","ref":"master","sha":"de9276169cdf399e99b34e22e19a5c71f7d79662","user":{"login":"reactjs","id":6412038,"avatar_url":"https://avatars3.githubusercontent.com/u/6412038?v=4","gravatar_id":"","url":"https://api.github.com/users/reactjs","html_url":"https://github.com/reactjs","followers_url":"https://api.github.com/users/reactjs/followers","following_url":"https://api.github.com/users/reactjs/following{/other_user}","gists_url":"https://api.github.com/users/reactjs/gists{/gist_id}","starred_url":"https://api.github.com/users/reactjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/reactjs/subscriptions","organizations_url":"https://api.github.com/users/reactjs/orgs","repos_url":"https://api.github.com/users/reactjs/repos","events_url":"https://api.github.com/users/reactjs/events{/privacy}","received_events_url":"https://api.github.com/users/reactjs/received_events","type":"Organization","site_admin":false},"repo":{"id":105963253,"name":"reactjs.org","full_name":"reactjs/reactjs.org","owner":{"login":"reactjs","id":6412038,"avatar_url":"https://avatars3.githubusercontent.com/u/6412038?v=4","gravatar_id":"","url":"https://api.github.com/users/reactjs","html_url":"https://github.com/reactjs","followers_url":"https://api.github.com/users/reactjs/followers","following_url":"https://api.github.com/users/reactjs/following{/other_user}","gists_url":"https://api.github.com/users/reactjs/gists{/gist_id}","starred_url":"https://api.github.com/users/reactjs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/reactjs/subscriptions","organizations_url":"https://api.github.com/users/reactjs/orgs","repos_url":"https://api.github.com/users/reactjs/repos","events_url":"https://api.github.com/users/reactjs/events{/privacy}","received_events_url":"https://api.github.com/users/reactjs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/reactjs/reactjs.org","description":"The React documentation website","fork":false,"url":"https://api.github.com/repos/reactjs/reactjs.org","forks_url":"https://api.github.com/repos/reactjs/reactjs.org/forks","keys_url":"https://api.github.com/repos/reactjs/reactjs.org/keys{/key_id}","collaborators_url":"https://api.github.com/repos/reactjs/reactjs.org/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/reactjs/reactjs.org/teams","hooks_url":"https://api.github.com/repos/reactjs/reactjs.org/hooks","issue_events_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/events{/number}","events_url":"https://api.github.com/repos/reactjs/reactjs.org/events","assignees_url":"https://api.github.com/repos/reactjs/reactjs.org/assignees{/user}","branches_url":"https://api.github.com/repos/reactjs/reactjs.org/branches{/branch}","tags_url":"https://api.github.com/repos/reactjs/reactjs.org/tags","blobs_url":"https://api.github.com/repos/reactjs/reactjs.org/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/reactjs/reactjs.org/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/reactjs/reactjs.org/git/refs{/sha}","trees_url":"https://api.github.com/repos/reactjs/reactjs.org/git/trees{/sha}","statuses_url":"https://api.github.com/repos/reactjs/reactjs.org/statuses/{sha}","languages_url":"https://api.github.com/repos/reactjs/reactjs.org/languages","stargazers_url":"https://api.github.com/repos/reactjs/reactjs.org/stargazers","contributors_url":"https://api.github.com/repos/reactjs/reactjs.org/contributors","subscribers_url":"https://api.github.com/repos/reactjs/reactjs.org/subscribers","subscription_url":"https://api.github.com/repos/reactjs/reactjs.org/subscription","commits_url":"https://api.github.com/repos/reactjs/reactjs.org/commits{/sha}","git_commits_url":"https://api.github.com/repos/reactjs/reactjs.org/git/commits{/sha}","comments_url":"https://api.github.com/repos/reactjs/reactjs.org/comments{/number}","issue_comment_url":"https://api.github.com/repos/reactjs/reactjs.org/issues/comments{/number}","contents_url":"https://api.github.com/repos/reactjs/reactjs.org/contents/{+path}","compare_url":"https://api.github.com/repos/reactjs/reactjs.org/compare/{base}...{head}","merges_url":"https://api.github.com/repos/reactjs/reactjs.org/merges","archive_url":"https://api.github.com/repos/reactjs/reactjs.org/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/reactjs/reactjs.org/downloads","issues_url":"https://api.github.com/repos/reactjs/reactjs.org/issues{/number}","pulls_url":"https://api.github.com/repos/reactjs/reactjs.org/pulls{/number}","milestones_url":"https://api.github.com/repos/reactjs/reactjs.org/milestones{/number}","notifications_url":"https://api.github.com/repos/reactjs/reactjs.org/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/reactjs/reactjs.org/labels{/name}","releases_url":"https://api.github.com/repos/reactjs/reactjs.org/releases{/id}","deployments_url":"https://api.github.com/repos/reactjs/reactjs.org/deployments","created_at":"2017-10-06T03:16:04Z","updated_at":"2017-11-20T17:12:57Z","pushed_at":"2017-11-20T17:09:26Z","git_url":"git://github.com/reactjs/reactjs.org.git","ssh_url":"git@github.com:reactjs/reactjs.org.git","clone_url":"https://github.com/reactjs/reactjs.org.git","svn_url":"https://github.com/reactjs/reactjs.org","homepage":"https://reactjs.org/","size":63961,"stargazers_count":678,"watchers_count":678,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":290,"mirror_url":null,"archived":false,"open_issues_count":43,"forks":290,"open_issues":43,"watchers":678,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/305"},"html":{"href":"https://github.com/reactjs/reactjs.org/pull/305"},"issue":{"href":"https://api.github.com/repos/reactjs/reactjs.org/issues/305"},"comments":{"href":"https://api.github.com/repos/reactjs/reactjs.org/issues/305/comments"},"review_comments":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/305/comments"},"review_comment":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/reactjs/reactjs.org/pulls/305/commits"},"statuses":{"href":"https://api.github.com/repos/reactjs/reactjs.org/statuses/44e5f6a1ddc19da6d6112df9b33dba3b90f91dd6"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"bvaughn"}}