why-did-you-render | Welldone Software monkey patches React to notify | Frontend Framework library

I will try to answer each question and hopefully give you some extra information to help you make a decision.

In simple words, a pure component (or pure function) is a component (or function) that will always return the same output for the same input (by the way, this is not exclusive to React).

Example: function add(x, y){return x + y} is a pure function because add(1, 2) will always return 3, no matter how many times you run it.

PureComponents have the same idea. You can read more about PureComponents in the official docs.

In the article that you linked, this is the key part to answer this question:

Always remember: the syntax is just a sugar for: React.createElement('jsx', {prop: 'a'}). This means whenever it’s father re-renders, jsx tries to update itself with a new props object.

A PureComponent would know that the prop: a didn't change, so it would not rerender. This happens because of the Shallow Compare utility.

You could either use the suggestion from the article (create a PureWrapper component and use it to wrap your ) or use the useCallback hook (or useMemo). Something like this:

Update: Actually the issue is that if your clustered map is animation enabled using the animationEnabled prop here, any following UI change is animated on iOS, see here.

I now reverted my original change (see below) and simply set the animationEnabled prop to false.

Initial answer:

Alright, found it (my fault :)) As you can see from the attached package.json file I'm using react-native-maps and react-navigation. As the screen rendering the map was not dismissed by react-navigationwhen navigating to the settings shown in the screenshots and changing the settings affects which map is rendered, changing the settings and the following update to the redux store trigger the hooks of my map component, thus re-rendering the screen and slowing down the app.

I addressed this issue now by using react-navigation event listeners and unmounting the map screen whenever it loses focus.

OK, I figured out the issue. I thought the error was telling me that path was undefined. When it fact it was saying the variables passed into path.join() were undefined. And that was because I forgot to add in my .env file to the root so it could grab those variables. Whoops!

Ok, I figured it out by comparing a fresh react native app with only react-native-reanimated installed and my original project.

As expected the issue was with the babel configuration, especially the wildcard plugin. I couldn't exactly figure out the reason, but applying the plugin to the whole project caused some side effects, i.e. import * as abc from './somelocation in my node_modules not being treated correctly.

As I need the wildcard plugin only to be applied to a specific folder ./src/i18n/* I changed my babel.config.js as follows:

By the end of the day the package that was causing it was @ui-kitten/eva-icons. I just had to remove it and it worked.

You can use these versions:

Node: 12, NPM: 6 and node-sass: 4.12+

To fix this error, you need to fix your node and node-sass versions as per this version compatibity list. From this list, you need minimum Node 8 if you are using node-sass 4.5.3+.

I would recommend you to upgrade your nodejs and npm to latest LTS Node 12.16.3 (includes npm 6.14.4), and after that to go with node-sass version 4.12+. Here is how to upgrade node & npm.

To change node-sass version, write this in your package.json: "node-sass": "^4.12.0",.

Looking at your repo I see that you are importing your scss but attributing it's properties to classNames.

className should be the name of the class, and you can either attribute your imported styles to style or you can load your compiled css into the DOM using

The reason you're not seeing a stylesheet in the network tab is because you've simply forgotten to declare a stylesheet.

Support the ES6 or not is rely on your Browser. It's more like you trying to use the class but there is no instance to access.

Transpiled to es5 class is available in PR#8656, the whole react class elements are supported to extend with this library. If you transpile your classes by ES5 or ES6, use below code: