This question already has answers here:
Proper use of const for defining functions
(5 answers)
Closed 5 years ago.
I was wondering if there is any difference in performance when dealing with dumb component in React, since there are 2 possible ways to achieve the same result.
function Comp(props) {
...
}
const Comp = props => {
...
}
Really they are two ways to define a function and there should be no difference in the performances.
There's definitely no difference between the two in your example. Hence this code also gets compiled and you end up having the same thing:
function CompA(props) {}
const CompB = props => {}
gets transpiled to:
function CompA(props) {}
var CompB = function CompB(props) {};
edit: There is difference in both functions tho. In performance they are the same but in behavior the code is different. We have hoisting and different context involved.
edit2: Well, it looks like there IS a difference. Check out https://jsperf.com/react-stateless-compare
Related
This question already has answers here:
What do multiple arrow functions mean in JavaScript?
(7 answers)
Closed 3 years ago.
Below is a code snippet which I came across in one of the blog for redux.
This snippet explains redux-thunk. But I am trying to make sense out of the weird syntax
return ({dispatch, getState}) => next => action =>{}
I tried a google search with this syntax but did not get much help. I am not understanding how next and action objects are getting their values. Can someone please help me understand what's going on here?
Chaining of functions in this way is usually to enable a user to bind arguments to a final function in a controlled fashion, rather than having to supply them all in one go.
In effect it is an API design choice for a piece of functionality.
({dispatch, getState}) => next => action => {}
...is equivalent to:
function({dispatch, getState}) { // destructure two properties into arguments
return function(next) {
return function(action) {
// this function has access to `dispatch`, `getState`, `next` & `action`
}
}
}
Note that the "binding" of the arguments to the inner functions occurs through a feature of JavaScript called closures. Full explanation of closures in JavaScript here.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 3 years ago.
When I have a react hook and inside of it I want to define a function in it, would I better use
useEffect(() => {
//...
function handler() {}
//...
}, []);
or the newer const declaration
useEffect(() => {
//...
const handler = () => {}
//...
}, []);
Are both exactly equivalent or are there differences in how Javascript handles these things?
If I define a const, it's only valid within the current scope, while defining a function would be valid elsewhere, is this true?
Does react need the functions accessible in different scopes or are they staying local in the current hook scope?
Since THIS is apart of the past by using React Hooks, you can use them both :) it's just syntax sugar es6.
If you want to go deeper on their differences you can use this article: https://www.freecodecamp.org/news/constant-confusion-why-i-still-use-javascript-function-statements-984ece0b72fd/ (there are plenty of more)
BUT IN REACT HOOKS THEY HAVE THE SAME SCOPE
React hooks you can only use in pure components, means functions. So most of things you do there is just working as would you work with just some js function, no much difference really. In hooks themselves not all things possible, like one time I tried to make useEffect hook callback to be async function and get warning to run async function inside of it instead.
Inside pure component, that function, you not really need any this, so as Renaldo Balaj said, there is no difference wether use usual or arrow function.
This question already has answers here:
What are these three dots in React doing?
(23 answers)
Closed 3 years ago.
Trying to understand a code snippet. What does ...this.savedSettings() do in the following snippet. afaik, ellipsis is used for destructuring and to pass variables to a function (spread syntax)
constructor(props) {
super(props);
this.state = {
page: 'dashboard',
...this.savedSettings(), // THIS LINE
setPage: this.setPage,
};
}
savedSettings() {
if(noData) {
return {page: 'settings', firstVisit: true};
}
return {};
}
PS: I understand that there is a similar question here as mentioned by mod. I did refer to the same before putting this one out. Goes without saying, the spread syntax is subtle and that question was a generic, albeit well answered, question on applying it on an object like props in a React component. It was not immediately clear to me how to apply that here.
This question is more generic as to applying spread syntax against a JS function call. IMHO for someone not very experienced/on the way of being experienced, the subtle difference can be confusing and a question/snippet like this can be profitable.
That said, I've answered this myself. While SE runs promos to ask questions, they should highlight the fact that it risks reputation. Thanks for the downvotes.
This is in fact used as spread syntax. The syntax is applied to the returned object. It merges the given object (this.state with the object returned by the function this.savedSettings(). Resulting in this.state being assigned with
// if noData is true
{
page: 'settings', // MERGED/OVERWRITTEN
firstVisit: true, // MERGED/ADDED
setPage: this.setPage,
};
or
// if noData is false
{
page: 'dashboard',
setPage: this.setPage,
};
This question already has answers here:
What is the difference between const and const {} in JavaScript
(4 answers)
Closed 4 years ago.
So while I was making my react native app, I tried to use an API from
https://github.com/uport-project/react-native-uport-connect and there is a syntax that I've yet to understand.
May I know what does const { uport, MNID } mean from this code
import configureUportConnect from 'react-native-uport-connect'
const { uport, MNID } = configureUportConnect({
appName: 'uPort Demo',
appAddress: '2oeXufHGDpU51bfKBsZDdu7Je9weJ3r7sVG',
privateKey:'<PRIVATE_KEY>',
})
Im quite new to this and this code is placed on a seperate js file and im trying to export const { uport, MNID } so I could use it in my Components and im not sure if it's a variable, object or some js syntax. Thank you!
This is called destructuring, and it means you are assigning your variables, not to the object that the function returns, but to the individual properties of that object, specifically the properties at the keys uport and MNID. The alternative syntax would be to say const variableName = // etc... and then you would access the properties like: variableName.uport.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
This question already has answers here:
var functionName = function() {} vs function functionName() {}
(41 answers)
Closed 8 years ago.
few years back people always define function like this way
1) function foo() {}
now i have noticed people define function like this way
2) var foo= function () {}
3) foo: function() {}
4) var GaugeBar = GaugeBar || {};
GaugeBar.generate = function (percentage) {}
so anyone JavaScript expert would tell me why people follow different approach for defining function? each signature has any special significance ?
when we should follow which one?
looking for good explanation. thanks
I think that there is some confusion in your question - the only valid approach to define a function is 1) and 2). The other two are just different uses of functions in objects.
I personally like to define named functions (function myFunc () {}) because if my program crashes the function names will appear in stack traces. However, there are situations where I use anonymous functions if those functions are not part of a public API or if they are used only once in my program.
Option 3) is basically a function that gets assigned to an object:
var myObject =
{ func: function () {}
, func2: function () {}
}
Option 4) is merely a way how to ensure that a variable contains an object and after that adding some functions to that object.
In practical terms, there is no difference whether you give your functions a name or you use anonymous functions (except for the stack traces and for differences already described in this SO question) and I believe it depends on the programmer's preferred code style. I would love if everyone named their publicly accessible functions as it makes debugging easier, but that's up to each developer to decide.