Posts by Rafael Tavares • 4,528 points
139 posts
-
4
votes3
answers109
viewsQ: How to compare arrays ignoring the order of the elements in Jest?
In a situation where I have two arrays, it is possible to use the expect of Jest for a comparison where I hope arrays are equal, regardless of the order of the elements? I searched, but found no…
-
4
votes1
answer52
viewsQ: How to use interpolation in declaring a property of a type?
I’m trying to declare a guy who accepts different properties with a number, for example: prop1, prop2 ... propN. The point is, I’m having a hard time getting it to behave the way I expected it to,…
typescriptasked Rafael Tavares 4,528 -
2
votes1
answer59
viewsA: How to clear an input after clicking the button?
Dealing with forms is complex. It is not at all that there are several libraries for this, as the React Hook Form, Formik, Unform etc.. If you don’t use a library to handle the form, there are two…
-
5
votes1
answer58
viewsA: How do I make Typescript accept the "useRef" value in React?
Elements of the GIFT When a reference is created for an element of the DOM, it can: Reference the DOM element; Being null - because, for example, the component has been disassembled, so it has…
-
2
votes3
answers3708
viewsA: What is the difference between useMemo and React useCallback?
The only thing both Hooks have in common is that they return something memoizado. Although this is enough to confuse the functionality of both, throughout the answer it will be very clear what are…
-
0
votes0
answers29
viewsQ: In which situations should I use useRef?
I recently read an article entitled You’re overusing useMemo: Rethinking Hooks memoization. In it, I saw something interesting that I hadn’t thought of before, using the useRef to store object…
-
2
votes1
answer49
viewsA: How to use componentDidMount, componentWillUnmount and declare the initial state in functional components?
Hooks You will replace the lifecycle functions with Hooks. The status too. Therefore, read What are React Hooks? if you have any questions about them in general. useEffect The hook useEffect can…
-
4
votes1
answer106
viewsA: What is the difference between align-items and align-content?
align-items The estate align-items aligns the items inside a flex container along the cross axis (perpendicular). It works the same way as the justify-content for the main axis. In the case of the…
-
3
votes3
answers65
viewsA: How to decrease the amount of if/Else for the same validation of different object properties?
You can create a function responsible for validating the obligation, which displays the error and returns false if the field is invalid. And a second function that will call the first one for each…
-
4
votes2
answers64
viewsQ: Is it possible to perform an overload (Overload) with Arrow functions?
I have a function where the return type depends on the parameter type. I was able to declare this overload with function, but not with Arrow Function, because I get the error: Cannot redeclare…
-
5
votes1
answer122
viewsQ: What is the prop "key" for in React?
When rendering a dynamic list in React or React Native, I receive the following warning: Warning: Each Child in a list should have a Unique "key" prop. Despite this, things seem to work well without…
-
2
votes1
answer72
viewsA: How to optimize rendering on functional components in React?
Optimize the performance of the app is a very extensive subject. The question’s title relates to optimizing rendering, and this can be taken to two interpretations: avoid unnecessary rendering or…
-
1
votes2
answers24
viewsA: Different behavior using useState and useContext/useReducer
The problem is simple to solve, it seems to me that it was unnecessarily complicated. See the code: const [isLoading, setIsLoading] = useState(false) useEffect(() => { setIsLoading(true)…
-
4
votes3
answers196
viewsA: What causes my component to be rendered again in React?
Summary The answer got a little long. In short, React has an algorithm that compares two tree elements in the DOM to know whether to update them or not. This algorithm will update the DOM tree when:…
-
2
votes3
answers2779
viewsA: What are React Hooks?
What are Hooks? Hooks are functions, so they vary so much from each other. Some return an object, others return an array, a function or nothing. Each hook will have your responsibility, including…
-
4
votes2
answers52
viewsA: How to allow the click event to be ignored by clicking inside an element?
One option is you add one Event Listener in div to stop the spread of click event with stopPropagation. To div will listen for clicks in any region that is rendered, then you can click on the…
-
2
votes2
answers48
viewsQ: What is the difference between using forwardRef or another prop to pass the reference?
To documentation says reference forwarding is a technique to pass the ref of a parent component for a child, and gives examples with React.forwardRef. But what’s the difference between forwarding…
reactasked Rafael Tavares 4,528 -
3
votes1
answer29
viewsA: Image of some items is not updated when modifying the list order
I see two problems in the example you created: The useEffect in the <Card> has a wrong dependency array. Before editing in the question, there was no dependency array, so useEffect was…
-
2
votes1
answer211
viewsQ: Typeerror: replaceAll is not a Function
I am developing a system in Electron that works well, but when running the tests in Jest I get the following error: console.error Error: Uncaught [TypeError: value.replaceAll is not a function] at…
-
3
votes1
answer211
viewsA: Typeerror: replaceAll is not a Function
The problem This problem happens because the String.prototype.replaceAll is a new method, added to ES2021. In addition to older browsers, older versions of Node.js (v14 or earlier) do not support…
-
2
votes1
answer35
viewsA: Twitter API returning "Status is a Duplicate"
There are some problems in your code: Is not using properly strings template in the status. The line correction is: Bot.post('statuses/update', { in_reply_to_status_id: tweetId, screen_name:…
-
6
votes2
answers47
viewsQ: Is it possible to discriminate unstructured values of an object with union type in Typescript?
I realized that by performing the breakdown in the signature of the function (funcao({ a, b }: Objeto)), I end up losing a certain consistency of the types. In the specific case where I realized…
-
2
votes2
answers96
viewsA: Problem when performing HTTP request on Android
The Android Manifest has a property called android:usesCleartextTraffic, which allows or blocks (unencrypted) HTTP requests. Starting with API 28, the default value is "not allowed", as quoted here:…
-
3
votes2
answers57
viewsA: Problem with clearInterval in React
As @Luiz Felipe said in the comment, you are running the clearInterval in its function, and not in the range itself. This is one of the points that needs to be corrected and we can do this with the…
-
0
votes1
answer89
viewsA: "Building Javascript Bundle" very slow to start Expo on Android
This slowness can happen yes. Reading a question from Soen (React Native Expo building very slowly) and based on past experiences, I say it may have to do with your computer’s capacity or with the…
-
1
votes1
answer54
viewsA: How to put optional parameter in Reactjs
Even if you set your example (following your line of reasoning), the result would never be undefined - would return false as value, that is, the field would always be sent. See below: const addParam…
-
3
votes1
answer73
viewsA: How to use the React useRef hook with the Numberformat component?
According to the documentation of the component itself, such as ref is a special property of React, you are taking the component reference NumberFormat, and not of input. To get the reference of the…
-
0
votes1
answer107
viewsA: Error configuring Admob in React Native
You are adding dependency the wrong way. See that there is already one getPackages for this and with comments indicating how to do: @Override protected List<ReactPackage> getPackages() {…
-
0
votes1
answer77
viewsA: Organize table with reactjs and firebase
The problem is that the data format is not the same format you want to display. There are a few ways to solve, but I think the easiest/readable way is to have the array ready to be mapped to the…
-
5
votes1
answer796
viewsA: Eslint error: "Must use destructuring state assignment"
This error is from a Eslint rule: Enforce consistent Usage of destructuring assignment of props, state, and context (React/destructuring-assignment). In free translation, this rule serves to have a…
-
8
votes2
answers5261
viewsA: What are the real differences in creating a project with Expo and without Expo?
Summary Whether or not it’s worth starting a project with Expo depends a lot. Depending on your app’s needs, will need go only with React Native. Depending on, you may or may not choose Expo. In…
-
2
votes1
answer2403
viewsA: Code not working as expected to display Gauss Sum
Well, there are some problems in your code. But first of all, I recommend using ; at the end of the lines, see Whether or not to use semicolons at the end of Javascript lines? for more details. The…
javascriptanswered Rafael Tavares 4,528 -
1
votes1
answer85
viewsQ: Should I avoid using "optional chaining" within the dependencies of a Hook?
Today I noticed that I use the optional chaining (?.) within the dependencies of a hook: useEffect(() => { // ... }, [route.params?.addedProduct]); It seems to work as expected, at least for now…
-
3
votes1
answer152
viewsA: Error with . splice, is removing the first element and not specified
As has already been said in the comments, the problem is that the splice should receive the element index (its position in the array), not the element itself. When you pass an invalid index, the…
-
10
votes3
answers537
viewsQ: What is Hermes for?
I saw that the Hermes is a javascript engine and that was developed by Facebook for React Native, being recently added to Android on version 0.60.1 and later for iOS on version 0.64.0. But if we had…
-
6
votes1
answer201
viewsA: Why doesn’t React accept camelCase to name components?
Is written in the documentation that the name of the components should start with a capital letter, so this shouldn’t come as a surprise. Briefly, it is to differentiate your component from an HTML…
-
0
votes3
answers238
viewsA: Rendered content behind the Statusbar
The problem is that your screen is not considering the size of StatusBar. For example, when the StatusBar is with the property translucent defined the application will be rendered behind it, which…
-
4
votes3
answers194
viewsA: Why does isNaN(null) return "false"?
The question has already been answered, but I would like to add some information here. The behavior of isNaN The behavior mentioned in the question is in accordance with the specifications of…
-
6
votes3
answers194
viewsQ: Why does isNaN(null) return "false"?
I came across a situation where undefined and null return a different value to the function isNaN, while I hoped they would both return true (are not numbers). In the example below I also put a…
-
5
votes1
answer416
viewsA: State returning wrong/late value
The setState is asynchronous This is the expected behavior. Calls to setState are asynchronous, React seeks to perform a batch update (batch) to cause less rendering. That answer talks a little…
-
1
votes2
answers550
viewsA: How can I leave the dynamic baseURL in React
To change the baseURL it is necessary to create a new instance of Axios with .create. Follow an example below: // config/axios.js let axiosApiServer = axios.create({ baseURL:…
-
4
votes4
answers2518
viewsA: How to count occurrences of a value within an array?
The question has already been answered with the use of filter (here) and with the use of for (here), both are valid solutions to the problem, but I want to bring another alternative, also using one…
-
4
votes2
answers3405
viewsA: What does this error mean? (Assign Arrow Function to a variable before exporting as module default import/no-Anonymous-default-export)
The cause of the error This "error" is related to a Eslint-plugin-import: import/no-anonymous-default-export. The rule has the following definition: Reports if a module’s default export is unnamed.…
-
1
votes2
answers2175
viewsA: Typescript error: Object is possibly 'null'
The problem is that you may happen to try to convert a null for Number with the unary operator +, and Typescript interprets this as a possible logic error. If it’s "all right" convert null for 0,…
-
1
votes1
answer62
viewsA: Functional component state losing values after upgrading it: "Cannot read Property ..."
The useState of a functional component does not work in the same way as the setState of a class component. Citing the documentation on Componentes Classe (setState): When you call setState(), React…
-
1
votes1
answer447
viewsA: Error running "React-Native run-android": Execution failed for task ':app:processDebugResources'
It is relatively common for Android build errors to occur after installing a library. This occurs if you modify some file within the directory /android or if React Native performs the link of that…
-
9
votes2
answers246
viewsA: What does "!!~" mean in Javascript?
The code in question may be divided into parts to facilitate understanding: ! represents the negation of something; !! is the negation of negation, usually used to convert values Truthy and falsy in…
-
2
votes2
answers65
viewsA: File does not appear for comitt in Smartgit
As already stated in the comments, you can make use of the .gitignore. The .gitignore is a file in which you specify other files that should not be screened, that is, it will ignore whether or not…
gitanswered Rafael Tavares 4,528 -
13
votes3
answers6191
viewsA: The operand of a 'delete' Operator must be optional
This error was introduced in version 4.0, and is one of the Breaking changes: When using the delete Operator in strictNullChecks, the operand must now be any, unknown, never, or be optional (in that…
typescriptanswered Rafael Tavares 4,528 -
0
votes1
answer1076
viewsA: Problem adding SVG to React Native
To make use of SVG in React Native you will need a library to help you with this. How are you using Expo, take a look in that documentation of react-native-svg and also in the library…