This hook is not firing for my theme. I did replace "THEME" with my theme name - and nothing. Any suggestions. I've looked all over and i cleared the cache.
Related
I have the following issue:
I would like to create a simple choropleth map using react-leaflet's GeoJSON component. I also want to have a tooltip that shows a value on hover over a GeoJSON feature. The problem is performance. A CodePen example can be found here: https://codepen.io/timester-the-typescripter/pen/gOXGKOY
I attach event handlers to each GeoJSON feature and set a state variable in my "main" component that holds the value for the currently hovered area.
const [selected, setSelected] = React.useState(null);
My tooltip relies on that state variable to show its value. Because every mouse hover event causes main component state change, the GeoJSON component gets re-rendered all the time. This is not a huge problem in the CodePen example, but for a full world map it is unfortunately.
I assume that the state change causes this because if I comment out the 2 setSelected lines (line 55, and line 67 in CodePen), the re-renders (calls to createGeoJSON ) stop, and the event handlers run a lot faster as the profiler pictures show below.
Mouseout event with state change:
Mouseout event with state change commented out:
I tried many solutions with no success. For example I think I can't memoize the GeoJSON component because the Tooltip must be its child and that depends on the state of the main component.
In the future I want to add more components depending on the hovered state variable like a legend, etc.. and maybe that variable will be a bit more complex than a simple number too.
What options do I have here? I had another stackowerflow question about this, but then I did not understand the problem completely, so it was not super focused. I'm at the point where I'm thinking about rewriting it in Angular. I found react and react-leaflet very pleasant to work with, until this issue came up.
The problem is that currently you are recreating the map with the appropriate Tooltip on each mouseover via the state. Instead, you should bind all Tooltips at map creation with layer.bindTooltip(). This will allow you to just show/hide them without having to recreate the map again, since they are already created and their creation will not rely on state.
See this github issue for an example with Popups (but the logic for Tooltips should be the same): https://github.com/PaulLeCam/react-leaflet/issues/33
I got help from this reddit comment https://www.reddit.com/r/reactjs/comments/std46f/comment/hx3yq34/?utm_source=share&utm_medium=web2x&context=3
The solution I applied based on this is not to use the Tooltip as a child component, but bind a tooltip to each layer in the onEachFeature method.
const onEachFeature = useCallback((feature, layer) => {
layer.bindTooltip(feature.properties.COUNT, {sticky: true});
...
This way I could also wrap the GeoJSON component in a useMemo() as there were no longer dependencies on the selected state. I also wrapped the style and onEachFeature functions in useCallback().
This combination solved the issue!
Is there a native MUI event for when the pre-selection value changes in a MUI:Select component?
For example, here is my MUI:Select component with 3 options:
I would like an event for when 'Public', 'Restricted' or 'Private' is pre-selected (but not actually selected; i.e. before the onChange() event), either with a mouse-over event or a keyboard up/down event. This is because I have a tooltip card that needs to change dynamically for the user as they interact with the options.
Using this example https://codesandbox.io/s/3iv96 as a guide, I implemented a bespoke solution by capturing the mouse-over event and extracting the text value. I just realized I have forgotten to handle key up/down.
So the question becomes whether I have just missed the obvious, or do I need to roll my own component by wrapping MUI:Select and publishing the events I need.
Looks like out of the box this isn't supported.
Looking at this thread https://github.com/JedWatson/react-select/issues/745 it has to be done manually.
I'm struggling to figure out how to make a single toolbar work across multiple editors - Only the current editor in focus should be effected by the toolbar. Is this possible? Is there a good example out there for Draft.js?
What you can do is:
It is good to have global state in use for this case
(for React hooks)
Pass your toolbar the state and setState for your editor.
When you focus on editor dispatch the state and setState for that editor to global state and make Toolbar subscribe to it.
also for the editor whenever state changes, you need to update the global state as well.
by this you will achieve managing editors from one toolbar.
I recommend you to not use Redux Toolkit as your global state library. Because when you will try to save the state it will throw an error (EditorState is nonserializable).
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.
I can't seem to override antd Select's search functionality. It seems to ignore the state change triggered by onSearch callback function. I have created a sandbox of my code: sample code
Am I missing something? I'm quite sure the state changes are reflected immediately but the loop seems to be using something else -- not the services state. Or it's just not possible to override it?