I need to remove React elements (a button) and change text at a certain time and day and I was wondering if there is a way to do it dynamically so that way i don't have to set an alarm and change it manually.
There are probably multiple ways to do this but i would do this:
Check current time in componentDidMount
Set component hidden or visible by using this.setState
Use setTimeout to setup a function to change visibility of the button when needed again.
Related
I create 2 Text Boxes one with hook and the another one with the old style, now in Hook mode when the user input change the textbox value the whole page rendered, but with old style there only the text-box rendered not the whole page, if you have the complex page with many objects like (Data Table, form, buttons, inputs, etc..) the single change on one of these components forced to re-render everything and it decease performance, for example typing in the text-box take time to effect on page and the delay time is more than user typing speed.
the one workaround solution is using the callbacks and useMem but if the page is complex(lots of objects as described, and all of these objects has many properties the callback and useMem is very very complicated to handle single object property.
SandBox Example
This is exactly how react hooks should work. what will cause a rerender in react? two things:
change in props
change in hooks or say in a better way hooks state
in the second case, the useInput state is changing so that causes a rerender and it's absolutely normal behavior. I think using custom hook in that way is not a good practice.
I recommend reading this article for more information on react rendering: https://www.codebeast.dev/usestate-vs-useref-re-render-or-not/
I'm using react FullCalendar component and I need to change the background color of an event as it becomes the "CurrentEvent" (when the now indicator is over it).
I'm able to do that when I load the screen, but I also need to do it when the screen is open and the "current event" changes as the time passes.
The way I was thinking about doing that is by using any callback indicating this situation and then changing the style, but I'm not finding any callback that points out this situation.
Any ideas? Thank you.
This may be incredibly simple but for the life of me I can't figure out how to achieve it.
I have a notification system working through websockets and every time a new notification gets sent, I add it to an array in state and re map to include the notification. each notification has its own timeout so I'm able to remove them programatically... but.... each notification also has an animated logo which basically resets every time a new notification appears. This happens due to the array being mapped each time and therefore the animation begins again as it's essentially a new notification... so I end up with several notifications all having their animation in sync.
Ultimately i'd like to be able to receive a new notification, render it and not touch set state... is this possible?
I'd say it depends on how exactly you are doing animations. Is it purely CSS animation or JS-driven one? Usually such behavior would mean that components are being remounted on every update. This can be changed by providing consistent key attribute, such as a unique id that identifies a notification.
If you make sure your existing notifications have the same keys as before, they shouldn't rerender when you add a new notification to your array in state.
Here's a codesandbox in which you can generate new notifications without triggering re render for existing notifications.
I used react-infinite-scroll-component it's working just fine.
However, I want to avoid making the user lose his scroll position when he leaves the page and clicks back?
Also please put on consideration Firefox and Safari.
Not 100% sure because I haven't used it - but since no one else has chimed in... the docs say the component has a prop named key that is described as:
the key for the current data set being shown, used when the same
component can show different data sets at different times,
default=undefined
Also, it has a prop named onScroll that is described as:
a function that will listen to the scroll event on the scrolling
container. Note that the scroll event is throttled, so you may not
receive as many events as you would expect.
... which I suspect one of the arguments of which will tell you which keys it loaded / scrolled through.
So my approach would be to use componentWillUnmount to save the last key it loaded into a parent property (or Redux store if you're using Redux)... and when the component loads, if the key exists in the parent (or Redux store if you're using Redux) then pass it that key.
I'd like derive a class from Button to add an initial delay and interval which shall be used as long as the button is touched for repeated action.
At first thought this seems to be simple enough but the method com.codename1.ui.Button.setState(int) cannot be overridden because it has package access only. Is that for a good reason?
I noticed, that Button calls actionPerformed on pointerReleased. My Button descendant should call actionPerformed repeatedly but not wen the parent container of the Button is beeing scrolled. This would hopefully just correspond with the Button state STATE_PRESSED, right?
If I understand correctly what you mean then I'd just start a timer on the pressed method and then repeatedly call super.pressed & super.released whenever the timer elapses.