This question already has an answer here:
What does this symbol mean in JavaScript?
(1 answer)
Closed 3 years ago.
I'm a bit new to react. I can use them with my past experiences. For example, I need sth to describe, I found a similar declaration and use the same shape. But I would like to learn the fundamentals. I mean when should I use below operators;
const sth : ...
() => ...
const sth = ...
If you list the basis of these usages, I would add on them with docs.
Those are fundamentals of Javascript and Typescript (or any type definition with js) and not React, please refer to A re-introduction to JavaScript (JS tutorial) in MDN docs.
Arrow function
(param1, param2, …, paramN) => { statements } // const sth = () => ...
Assignment operator
const sth = ...
Typescript type or any kind of type definition like flow
let isDone: boolean = false;
Related
This question already has answers here:
How to execute a JavaScript function when I have its name as a string
(36 answers)
Closed 2 years ago.
My problem is simple and I couldn't find the proper answer in this forum. My bad...
I want to do that :
const dataReceived = foo;
foo(state);
How can I do that?
I read it is better to avoid eval, and I couldn't get success with new Function.
Thanks for your help!
EDIT
Thanks for your answers.
I work with React.
In my reducer, I have a create_item case.
I can reach action.category, that can be the word 'currency' or 'country'.
What I want to do is to launch either the method createCurrency or createCountry according what is inside action.category.
That's why I tried to join 'create' and 'action.category' to create a dynamic function name.
But it seems to be a poor idea...
The simplest approach is to create an object which contains an entry where:
the key is a string
the value is a function.
Example:
const myObject = {
myFunction: () => { [... DO SOMETHING...] }
}
Subsequently you will be able to invoke the function, using:
myObject.myFunction();
The above becomes more powerful when you use brackets notation.
Example:
const myString = 'myFunction';
myObject[myString]();
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:
Rules for the use of angle brackets in TypeScript
(2 answers)
Closed 3 years ago.
I have just seen a piece of code for React that has a syntax I have never seen before. I haven't been able to find what it actualy is. Can someone, please, explain what calling a function with <> instead of () does?
const ConfirmationServiceContext = React.createContext<
// we will pass the openning dialog function directly to consumers
(options: ConfirmationOptions) => Promise<void>
>(Promise.reject);
The piece of code is from here
This is actually Typescript type firm for an async lamda.
React.createContext<(options: ConfirmationOptions) => Promise<void>>(Promise.reject);
React.createContext is a Generic type, the < and > is how we pass the concrete type we're going to use in this instance. Here we're passing an inline function that gets a ConfirmationOptions object and returns a Promise whose value is void
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:
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