How can I bind function with hooks in React?
Basically we bind event handler functions in constructor or make them as arrow functions in React class components like below
class Test extends Component
constructor(props)
super(props);
this.state = count:0 ;
this.setCount = this.setCount.bind(this);
setCount()
this.setState(count: this.state.count + 1);
render()
return <button onClick=this.setCount>Increase</button>
But after hooks are introduced in React v16.7.0 the class components became functional components with state.
So how can I bind the function with hooks in functional component?
javascript reactjs react-native react-hooks
add a comment |
Basically we bind event handler functions in constructor or make them as arrow functions in React class components like below
class Test extends Component
constructor(props)
super(props);
this.state = count:0 ;
this.setCount = this.setCount.bind(this);
setCount()
this.setState(count: this.state.count + 1);
render()
return <button onClick=this.setCount>Increase</button>
But after hooks are introduced in React v16.7.0 the class components became functional components with state.
So how can I bind the function with hooks in functional component?
javascript reactjs react-native react-hooks
2
There is no need to bind the function in a function component since you are not usingthis
.
– Tholle
Nov 8 '18 at 19:49
you don't need if you use the arrow function
– victor zadorozhnyy
Nov 8 '18 at 19:50
Ok what if I use Redux connect method with mapStateToProps. How can I access props in functional component like this.props or just props?
– Hemadri Dasari
Nov 8 '18 at 20:02
1
You just use props ... not this.props
– weibenfalk
Nov 8 '18 at 20:08
add a comment |
Basically we bind event handler functions in constructor or make them as arrow functions in React class components like below
class Test extends Component
constructor(props)
super(props);
this.state = count:0 ;
this.setCount = this.setCount.bind(this);
setCount()
this.setState(count: this.state.count + 1);
render()
return <button onClick=this.setCount>Increase</button>
But after hooks are introduced in React v16.7.0 the class components became functional components with state.
So how can I bind the function with hooks in functional component?
javascript reactjs react-native react-hooks
Basically we bind event handler functions in constructor or make them as arrow functions in React class components like below
class Test extends Component
constructor(props)
super(props);
this.state = count:0 ;
this.setCount = this.setCount.bind(this);
setCount()
this.setState(count: this.state.count + 1);
render()
return <button onClick=this.setCount>Increase</button>
But after hooks are introduced in React v16.7.0 the class components became functional components with state.
So how can I bind the function with hooks in functional component?
javascript reactjs react-native react-hooks
javascript reactjs react-native react-hooks
edited Nov 12 '18 at 15:47
Hemadri Dasari
asked Nov 8 '18 at 19:45
Hemadri DasariHemadri Dasari
8,30411440
8,30411440
2
There is no need to bind the function in a function component since you are not usingthis
.
– Tholle
Nov 8 '18 at 19:49
you don't need if you use the arrow function
– victor zadorozhnyy
Nov 8 '18 at 19:50
Ok what if I use Redux connect method with mapStateToProps. How can I access props in functional component like this.props or just props?
– Hemadri Dasari
Nov 8 '18 at 20:02
1
You just use props ... not this.props
– weibenfalk
Nov 8 '18 at 20:08
add a comment |
2
There is no need to bind the function in a function component since you are not usingthis
.
– Tholle
Nov 8 '18 at 19:49
you don't need if you use the arrow function
– victor zadorozhnyy
Nov 8 '18 at 19:50
Ok what if I use Redux connect method with mapStateToProps. How can I access props in functional component like this.props or just props?
– Hemadri Dasari
Nov 8 '18 at 20:02
1
You just use props ... not this.props
– weibenfalk
Nov 8 '18 at 20:08
2
2
There is no need to bind the function in a function component since you are not using
this
.– Tholle
Nov 8 '18 at 19:49
There is no need to bind the function in a function component since you are not using
this
.– Tholle
Nov 8 '18 at 19:49
you don't need if you use the arrow function
– victor zadorozhnyy
Nov 8 '18 at 19:50
you don't need if you use the arrow function
– victor zadorozhnyy
Nov 8 '18 at 19:50
Ok what if I use Redux connect method with mapStateToProps. How can I access props in functional component like this.props or just props?
– Hemadri Dasari
Nov 8 '18 at 20:02
Ok what if I use Redux connect method with mapStateToProps. How can I access props in functional component like this.props or just props?
– Hemadri Dasari
Nov 8 '18 at 20:02
1
1
You just use props ... not this.props
– weibenfalk
Nov 8 '18 at 20:08
You just use props ... not this.props
– weibenfalk
Nov 8 '18 at 20:08
add a comment |
1 Answer
1
active
oldest
votes
There's no need to bind functions/callbacks in functional components since there's no this
in functions. In classes, it was important to bind this
because we want to ensure that the this
in the callbacks referred to the component's instance itself. However, doing .bind
in the constructor has another useful property of creating the functions once during the entire lifecycle of the component and a new callback wasn't created in every call of render()
. To do only initialize the callback once using React hooks, you would use useCallback
.
Classes
class Foo extends Component
constructor(props)
super(props);
this.handleClick = this.handleClick.bind(this);
handleClick()
console.log('Click happened');
render()
return <Button onClick=this.handleClick>Click Me</Button>;
Hooks
function Foo()
const memoizedHandleClick = useCallback(
() =>
console.log('Click happened');
,
, // Tells React to memoize regardless of arguments.
);
return <Button onClick=memoizedHandleClick>Click Me</Button>;
Thank you. Can’t I write event handler function like const memoizedHandleClick = () => console.log('Click happened'); ?
– Hemadri Dasari
Nov 12 '18 at 15:49
1
@Think-Twice yes, you can. But it will recreate handler on each render(the same as using arrow functions in class-basedrender()
).
– skyboyer
Nov 12 '18 at 15:58
Ok what is useCallback? Is it predefined name?
– Hemadri Dasari
Nov 12 '18 at 15:59
Yes it's another hook. Have you read the docs? You should check out the whole section on hooks: reactjs.org/docs/hooks-intro.html
– Yangshun Tay
Nov 12 '18 at 18:13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53215067%2fhow-can-i-bind-function-with-hooks-in-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
There's no need to bind functions/callbacks in functional components since there's no this
in functions. In classes, it was important to bind this
because we want to ensure that the this
in the callbacks referred to the component's instance itself. However, doing .bind
in the constructor has another useful property of creating the functions once during the entire lifecycle of the component and a new callback wasn't created in every call of render()
. To do only initialize the callback once using React hooks, you would use useCallback
.
Classes
class Foo extends Component
constructor(props)
super(props);
this.handleClick = this.handleClick.bind(this);
handleClick()
console.log('Click happened');
render()
return <Button onClick=this.handleClick>Click Me</Button>;
Hooks
function Foo()
const memoizedHandleClick = useCallback(
() =>
console.log('Click happened');
,
, // Tells React to memoize regardless of arguments.
);
return <Button onClick=memoizedHandleClick>Click Me</Button>;
Thank you. Can’t I write event handler function like const memoizedHandleClick = () => console.log('Click happened'); ?
– Hemadri Dasari
Nov 12 '18 at 15:49
1
@Think-Twice yes, you can. But it will recreate handler on each render(the same as using arrow functions in class-basedrender()
).
– skyboyer
Nov 12 '18 at 15:58
Ok what is useCallback? Is it predefined name?
– Hemadri Dasari
Nov 12 '18 at 15:59
Yes it's another hook. Have you read the docs? You should check out the whole section on hooks: reactjs.org/docs/hooks-intro.html
– Yangshun Tay
Nov 12 '18 at 18:13
add a comment |
There's no need to bind functions/callbacks in functional components since there's no this
in functions. In classes, it was important to bind this
because we want to ensure that the this
in the callbacks referred to the component's instance itself. However, doing .bind
in the constructor has another useful property of creating the functions once during the entire lifecycle of the component and a new callback wasn't created in every call of render()
. To do only initialize the callback once using React hooks, you would use useCallback
.
Classes
class Foo extends Component
constructor(props)
super(props);
this.handleClick = this.handleClick.bind(this);
handleClick()
console.log('Click happened');
render()
return <Button onClick=this.handleClick>Click Me</Button>;
Hooks
function Foo()
const memoizedHandleClick = useCallback(
() =>
console.log('Click happened');
,
, // Tells React to memoize regardless of arguments.
);
return <Button onClick=memoizedHandleClick>Click Me</Button>;
Thank you. Can’t I write event handler function like const memoizedHandleClick = () => console.log('Click happened'); ?
– Hemadri Dasari
Nov 12 '18 at 15:49
1
@Think-Twice yes, you can. But it will recreate handler on each render(the same as using arrow functions in class-basedrender()
).
– skyboyer
Nov 12 '18 at 15:58
Ok what is useCallback? Is it predefined name?
– Hemadri Dasari
Nov 12 '18 at 15:59
Yes it's another hook. Have you read the docs? You should check out the whole section on hooks: reactjs.org/docs/hooks-intro.html
– Yangshun Tay
Nov 12 '18 at 18:13
add a comment |
There's no need to bind functions/callbacks in functional components since there's no this
in functions. In classes, it was important to bind this
because we want to ensure that the this
in the callbacks referred to the component's instance itself. However, doing .bind
in the constructor has another useful property of creating the functions once during the entire lifecycle of the component and a new callback wasn't created in every call of render()
. To do only initialize the callback once using React hooks, you would use useCallback
.
Classes
class Foo extends Component
constructor(props)
super(props);
this.handleClick = this.handleClick.bind(this);
handleClick()
console.log('Click happened');
render()
return <Button onClick=this.handleClick>Click Me</Button>;
Hooks
function Foo()
const memoizedHandleClick = useCallback(
() =>
console.log('Click happened');
,
, // Tells React to memoize regardless of arguments.
);
return <Button onClick=memoizedHandleClick>Click Me</Button>;
There's no need to bind functions/callbacks in functional components since there's no this
in functions. In classes, it was important to bind this
because we want to ensure that the this
in the callbacks referred to the component's instance itself. However, doing .bind
in the constructor has another useful property of creating the functions once during the entire lifecycle of the component and a new callback wasn't created in every call of render()
. To do only initialize the callback once using React hooks, you would use useCallback
.
Classes
class Foo extends Component
constructor(props)
super(props);
this.handleClick = this.handleClick.bind(this);
handleClick()
console.log('Click happened');
render()
return <Button onClick=this.handleClick>Click Me</Button>;
Hooks
function Foo()
const memoizedHandleClick = useCallback(
() =>
console.log('Click happened');
,
, // Tells React to memoize regardless of arguments.
);
return <Button onClick=memoizedHandleClick>Click Me</Button>;
answered Nov 11 '18 at 5:55
Yangshun TayYangshun Tay
9,27853867
9,27853867
Thank you. Can’t I write event handler function like const memoizedHandleClick = () => console.log('Click happened'); ?
– Hemadri Dasari
Nov 12 '18 at 15:49
1
@Think-Twice yes, you can. But it will recreate handler on each render(the same as using arrow functions in class-basedrender()
).
– skyboyer
Nov 12 '18 at 15:58
Ok what is useCallback? Is it predefined name?
– Hemadri Dasari
Nov 12 '18 at 15:59
Yes it's another hook. Have you read the docs? You should check out the whole section on hooks: reactjs.org/docs/hooks-intro.html
– Yangshun Tay
Nov 12 '18 at 18:13
add a comment |
Thank you. Can’t I write event handler function like const memoizedHandleClick = () => console.log('Click happened'); ?
– Hemadri Dasari
Nov 12 '18 at 15:49
1
@Think-Twice yes, you can. But it will recreate handler on each render(the same as using arrow functions in class-basedrender()
).
– skyboyer
Nov 12 '18 at 15:58
Ok what is useCallback? Is it predefined name?
– Hemadri Dasari
Nov 12 '18 at 15:59
Yes it's another hook. Have you read the docs? You should check out the whole section on hooks: reactjs.org/docs/hooks-intro.html
– Yangshun Tay
Nov 12 '18 at 18:13
Thank you. Can’t I write event handler function like const memoizedHandleClick = () => console.log('Click happened'); ?
– Hemadri Dasari
Nov 12 '18 at 15:49
Thank you. Can’t I write event handler function like const memoizedHandleClick = () => console.log('Click happened'); ?
– Hemadri Dasari
Nov 12 '18 at 15:49
1
1
@Think-Twice yes, you can. But it will recreate handler on each render(the same as using arrow functions in class-based
render()
).– skyboyer
Nov 12 '18 at 15:58
@Think-Twice yes, you can. But it will recreate handler on each render(the same as using arrow functions in class-based
render()
).– skyboyer
Nov 12 '18 at 15:58
Ok what is useCallback? Is it predefined name?
– Hemadri Dasari
Nov 12 '18 at 15:59
Ok what is useCallback? Is it predefined name?
– Hemadri Dasari
Nov 12 '18 at 15:59
Yes it's another hook. Have you read the docs? You should check out the whole section on hooks: reactjs.org/docs/hooks-intro.html
– Yangshun Tay
Nov 12 '18 at 18:13
Yes it's another hook. Have you read the docs? You should check out the whole section on hooks: reactjs.org/docs/hooks-intro.html
– Yangshun Tay
Nov 12 '18 at 18:13
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53215067%2fhow-can-i-bind-function-with-hooks-in-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
There is no need to bind the function in a function component since you are not using
this
.– Tholle
Nov 8 '18 at 19:49
you don't need if you use the arrow function
– victor zadorozhnyy
Nov 8 '18 at 19:50
Ok what if I use Redux connect method with mapStateToProps. How can I access props in functional component like this.props or just props?
– Hemadri Dasari
Nov 8 '18 at 20:02
1
You just use props ... not this.props
– weibenfalk
Nov 8 '18 at 20:08