What is the best way to write event handler in React? - javascript

I had read the article about handle events in react with arrow functions. And the final way in that article is not likely the best because of re-render issue.
e.g.
class Example extends React.Component {
handleSelect = i => e => {
console.log(i)
}
render() {
return {this.state.language.map(item, i) => (
<ListItem
...
onPress={this.handleSelect(i)} // re-render sub component every time the Example render() because of the annoymous function
/>
)}
}
}
I wonder which way is the best to write event handler in React?

In order to get the best performance out of React, you need to minimize the number of objects that are being created during renders. And as a reminder a function declaration (e.g. function myFunc or const func = () => {}) creates an object.
I would say your code has an unsolvable issue because you're creating a new instance of the inner function when handleSelect is invoked:
handleSelect = i => e => {
console.log(i)
}
I'll rewrite this using the function notation because it's a bit more clear what happening (but I prefer arrow functions in practice):
handleSelect = function (i) {
return function (e) {
console.log(i);
}
}
The issue here is the with each render when you invoke handleSelect it creates a brand new inner function (i.e. function (e) {/* ... */}).
I mentioned that your code has an unsolvable issue because there is no way to split up your curried handleSelect function because you're passing the index i that's created inside the render function. Because that state doesn't exist anywhere else, you have to create a new function to close-over it every time and that's okay.
I would even refactor your code like so:
class Example extends React.Component {
// as #RickJolly mentioned, this method doesn't have to be arrow
handleSelect (i) {
console.log(i)
}
render() {
return {this.state.language.map(item, i) => (
<ListItem
...
onPress={() => this.handleSelect(i)}
)}
}
}
If you have to create a new function every time, then you might as well inline it vs returning a function. That's preference though.
Edit
As #RickJolly mentioned, if your method doesn't use this then it shouldn't be an arrow function.
From his comment:
since you're calling () => this.handleSelect(i) via an arrow function, this is bound to the this of the enclosing context [which is the class pointer]

Related

What the function type in Reac-Native

I have a function as below:
const myFunction = () => () => {
//do something
}
Does anyone help me explain what's means the function as above.
It's a function that returns a function. An example of where you might use this would be to reduce repetition when you need a set of similar callback functions. Here's an example from a recent React Native app that I've worked on: Consider a pocket calculator app that has a grid of similar buttons, each with an onPress callback that needs a distinct value to be used in the callback function:
// Snippet from React component
...
const onPress = value => () => {
console.log('You pressed ' + value);
}
return (
<>
<Button title="ONE" onPress={onPress(1)} />
<Button title="TWO" onPress={onPress(2)} />
<Button title="THREE" onPress={onPress(3)} />
</>
)
Each button gets an onPress callback function with a ()=>{} signature, as required, that does something with a distinct value. Rather than having to declare three functions, we've just declared one. Nice and tidy.

How do I pass both event and props?

I wrote a function that, when pressing Enter, calls the desired function.
And it looks something like this:
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
event.preventDefault ();
handleSubmit ();
}
}
And in the right place I just call it with onKeyDown = {handleKeyDown}. But it so happened that I use this function in many places, and somehow I don't want to just repeat the code. (even the names of the handleKeyDown functions are repeated everywhere)
And as a result, I created a separate file and threw the function there, but it did not work, I think it was due to the fact that I passed the event and props arguments to the function, and when I called this function I did not know what to pass instead of event (I can, of course, pass event to the function where I call it, but there are also props there, and this also does not work).
So how can I do this?
If I understand correctly, you wish to import the event handler, not a component, from a separate file. I am guessing you are asking about props because you want to pass a function handleSubmit from the component. In this case, one option is to pass the callback to a generator when attaching the handler. You might do this as follows.
my_event_handler.js
// Returns an event handler with the callback held in its closure
export default function createListener(handleSubmit) {
return (event) => {
if (event.key === 'Enter') {
event.preventDefault();
handleSubmit();
}
};
}
my_component.jsx
import createOnKeyHandler from './my_event_handler';
function MyComponent(props) {
const submitHandler = () => { console.log('woot'); };
return (
<input
placeholder='abc'
onKeyDown={createOnKeyHandler(submitHandler)}
/>
);
}

ReactJs What is the difference between calling {this.functionName} and {this.functionName()}

I have been using ReactJs for a couple of days now. And I find some syntax a bit curious.
For example, sometimes I have to call a function this way:
{this.functionName}
Without the parentheses at the end.
And sometimes I have to call it like this:
{this.functionName()}
Like in this example:
<button onClick={this.streamCamVideo}>Start streaming</button>
<h1>{this.logErrors()}</h1>
See the difference between calling this.streamCamVideo and this.logErrors().
Can someone please provide an explanation for this?
EDIT 1:
As requested, here are their definitions :
streamCamVideo() {
var constraints = { audio: true, video: { width: 1280, height: 720 } };
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.querySelector("video");
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
}); // always check for errors at the end.
}
logErrors(){
return(navigator.mediaDevices.toString())
}
{this.streamCamVideo} is a reference to the streamCamVideo function. You can think of this.streamCamVideo as a variable whose value is a function. Think about it like this:
const myVariable = 'some text'
const myOtherVariable = function() {
console.log("You are inside the myOtherVariable function");
}
Both myVariable and myOtherVariable are variables. One has the value of a string, the other has the value of a function. Let's say you want to pass both of these variables to another function:
const anotherVariable = function(aStringVariable, aFunctionVariable) {
console.log(aStringVariable, aFunctionVariable)
}
anotherVariable(myVariable, myOtherVariable)
You might see something like this logged to the console:
some text
[Function]
Notice that you don't ever see the text "You are inside the myOtherVariable function" logged to the console. That's because the myOtherVariable function is never called. It's just passed to the anotherVariable function. In order to call the function, you would need to do something like this:
const anotherVariable = function(aStringVariable, aFunctionVariable) {
aFunctionVariable()
console.log(aStringVariable, aFunctionVariable)
}
Notice the parentheses after aFunctionVariable()? That's what it looks like to actually call a function. So in this case, you'd see something like this logged to the console:
You are inside the myOtherVariable function
some text
[Function]
The function is actually being called.
So in your example:
<button onClick={this.streamCamVideo}>Start streaming</button>
<h1>{this.logErrors()}</h1>
this.streamCamVideo is just being passed as a variable to the <button> element. When the button is clicked, whatever has been assigned to onClick will be executed. That's when the function you passed as a variable will actually be called.
Also, notice the parentheses after this.logErrors()? The logErrors function is being executed. It is not being passed as a variable to anything.
{this.functionName} means referencing the function on a particular trigger. this way function will get called only when triggered.
{this.functionName()} is an actual function call, this method can be used to pass arguments. this function call will get called when page renders. This way function will get called repeatedly without any triggers. To stop that repeated function call we can use callback. like the following,
{() => this.functionName()}. this way the function will get executed only once.
{this.functionName} is used a reference type and it does not create instance on every render but {this.functionName()} is creates an instance of functionName on every render
<button onClick={this.streamCamVideo}>Start streaming</button>
Here if you use this.streamCamVideo Now it uses the reference type it does not create an instance of streamCamVideo but instead of if you use like this
<button onClick={()=>{this.streamCamVideo()}}>Start streaming</button>
Now it creates an instance of streamCamVideo instead of using the reference of streamCamVideo.
Creating an instance on every render it slows the performance of your application
Moreover, When evaluated, the first one is just a reference to the function, in the second case the function gets executed, and the expression will be evaluated to be the return value of the function.
We can use this.logErrors() when you want the function to be invoked and its result returned immediately.
In React, we typically follow this approach to split parts of your JSX code to a separate function for readability or reusability.
For Example:
render() {
someFunction() {
return <p>Hello World</p>;
}
return (
<div>
{this.logErrors()}
</div>
);
}
We can use this.streamCamVideo when you want only to pass the reference to that function to do something else.
In React, this is used while handling an event handler which can be passed down to another child-component via props, so that component can call the event handler when it needs to or when it gets triggered.
For Example:
class myExample extends React.Component {
streamCamVideo() {
console.log("button clicked!");
}
render() {
return (
<div>
<Button someCustomFunction={this.streamCamVideo} />
</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button onClick={this.props.someCustomFunction}>Click me</button>
);
}
}
...
this.functionName(args) {
...
}
When its called like
... onClick={this.functionName}
The react component accepts like
function SomeReactComponent({ onClick }) {
...
so that onClick function can be called like
...
onClick(someEvent);
...
so that your function can use those args
...
this.functionName(someEvent) {
...
}
When it calls like this
... onClick={this.functionName()}
onClick accepts the result of functionName, which should also be a function in this case.
One is attribute, another with "()" is function.

javascript (ReactJS), how to execute a reference of a function

If I have a function that I want to use in a onClick, such as this
*using ReactJS and Semantic-UI
<Table.HeaderCell
onClick={this.handleSort(items)}
>
where the function returns a reference of a function, such as this
handleSort = (items) => () => {
console.log('now')
}
then, how can I execute this function outside of the onClick event? What doesn't work:
componentDidMount() {
this.handleSort.call(items);
this.handleSort(items);
}
handleSort returns a function, you'll need to invoke it with (), like so:
componentDidMount() {
this.handleSort(items)();
}
I guess you are trying to execute the inner function that logs 'now' to the console.
As a clarification: this.handleSort(items) returns a anonymous function:
() => {
console.log('now')
}
In order to call it, you may do: this.handleSort(items)() to immediately invoke the inner function.
See:
var handleSort = (items) => () => {
console.log('now')
}
// holds the inner function part
var innerFunction = handleSort([]);
console.log(innerFunction.toString());
// Equivalent ways to call it directly
innerFunction();
handleSort([])();

What is this in ES6 and what does it mean?

im referring to this: () => {}
I understand arrows functions are new in ES6. I also understand they bind automatically to the parent context using the this keyword
so if I had
class Person {
classFunc = () => {
}
}
this would be bound to the parent and I could use this referring to the parent scope automatically
but I sometimes see this in the code () => {}, what does it mean?
for example
onClick={this.handleClick}
or
onClick={() => this.handleClick}
what is that second one doing? is it an anonymous function?
In second one it will handle the value of callback return by function.
login((res) => {
console.log(res); //Hear you will get the res from API.
})
Before :
login(function(res){
console.log(res);
})
ES6 is an updated version of Javascript also know as Javascript 2015. You can find much more about it under this link -
https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla
Answering your second question -
onClick={this.handleClick}
This will call the function handleClick which is available in the same ES6 class.
onClick={() => this.handleClick}
This will return the function definition and the function will never be invoked. To invoke the function you have to use the call the function.
onClick={() => this.handleClick()}
This will allow you to pass additional arguments if required -
const temp1 = "args1";
.
.
.
onClick={() => this.handleClick(temp1)}
I hope it helps.

Categories