dmitripavlutin.com | Dmitri Pavlutin 's blog powered by GatsbyJS | Blog library

Am I missing some nuance of javascript's scope here?

No, you're right, creating the array and passing it to useEffect doesn't affect the closure, the closed-over constant keeps its value.

Or does this "fix" things because of something that useEffect is doing with those variables?

Yes. React runs the entire render function each time the state changes, which creates a new closure and passes it to useEffect again. When the dependencies change, useEffect re-runs the effect function which creates a new interval with the new closure.

Also, th effect function is returning a cleanup function, which runs when the component unmounts or before running the effect the next time (when the dependencies change). This cleanup function calls clearInterval, which means the stale closure won't be executed again, and the number of concurrently active intervals doesn't increase.

Admittedly, this proposed solution has a huge bug: clearing the interval and starting a new interval every time the count changes does not lead to a nice periodic 2s interval, the gaps between two logs might be much larger - the logging is essentially debounced and will only run if no increment happened in the last 2s. If this is not desired, a ref might be a much simpler solution:

Thumb rule in React is that state object is immutable, can not change it directly. So whenever you want to update state you always create new objects.

Looking at your code, new objects created in both the cases in onChange as well as in useEffects. But useEffects creates infinite loop as dependency gets changed whereas onChange does not create infinite loop as state update does not onChange again

if you want to avoid an infinite loop, I suggest 2 ways.

• Change the dependency array from [secret] --> [secret.value]
• Or have these 2 values value, countSecretsas 2 different state

In summary, when you have object as state then you should always create new object and set it. Where as for value based state, react will take care of it.

This is most probably just a TypeScript syntax issue.

In your adminControllers.ts file, try the export syntax, like you have done in your adminSaveSnippet file, instead of the CommonJS exports:

I used the memo in a little experiment, I upload the pictures maybe it will be useful.

Title.js:

App.js:

However, with so many articles recommending against using arrow functions in event handlers, I am wondering if there are any disadvantages to my approach that I may have missed?

It doesn't look like you have missed anything. You are not using any of the "features" that make arrow functions different from "normal" functions.

You are

• not using this
• not using arguments
• not calling the function with new (and the browser doesn't either)

so you can choose either form.

If I remember correctly event.target didn't exist in older versions of Internet Explorer (< 9) (instead it was event.srcElement), but if you are using an arrow function you probably don't care about deprecated browsers ;)

You should be able to call toml('path/to/config/that/you/want/to/read.toml')

You have required a module src/toml.js. This module exports a function - doesn't really matter how this function is declared in this case. Whenever you import that module - you are given this function.

So:

Function declarations are hoisted to the top of their containing function (or the outermost block). Your lower code is equivalent to the following:

There is a huge difference between example 1 & 2.

In example #1, the reason it's bad to set state from the those props in that way is that if the props change, the widget will not update. Best practices or not, that is just wrong and bad in any framework. In that particular case, there really is no point in even using the state. Props alone will suffice.

In example #2 the prop is only being used to give the state an initial value (The prop is even named initialValue), implying that further changes to the state will be controlled by the component regardless of prop changes. It does not break single responsibility principle to use props for an initial state, especially when it's explicitly use for that purpose.

I really don't see those two examples as being contradictory because they are completely different. Further, there is no rule in single responsibility principle that you can't set state from props, you just need to pay attention to the context in which you are doing it.