We Keep Coding

How to force new state in React (Hooks) for textarea when clicking on another element?

codesandbox.io sandbox
github.com repository
I am creating this small Wiki project.
My main component is Editor(), which has handleClick() and handleModeChange() functions defined.
handleClick() fires when a page in the left sidebar is clicked/changed.
handleModeChange() switches between read and write mode (the two icon buttons in the left sidebar).
When in read mode, the clicking on different pages in the left sidebar works properly and changes the main content on the right side.
However, in write mode, when the content is echoed inside <TextareaAutosize>, the content is not changed when clicking in the left menu.
In Content.js, I have:
<TextareaAutosize
name="textarea"
value={textareaValue}
minRows={3}
onChange={handleMarkdownChange}
/>
textareaValue is defined in Content.js as:
const [textareaValue, setTextareaValue] = useState(props.currentMarkdown);
const handleMarkdownChange = e => {
setTextareaValue(e.target.value);
props.handleMarkdownChange(e.target.value);
};
I am unsure what is the correct way to handle this change inside textarea. Should I somehow force Editor's child, Content, to re-render with handleClick(), or am I doing something completely wrong and would this issue be resolved if I just changed the definition of some variable?
I have been at this for a while now...

You just need to update textareaValue whenever props.currentMarkdown changes. This can be done using useEffect.
useEffect(() => {
setTextareaValue(props.currentMarkdown);
}, [props.currentMarkdown]);
Problem:
const [textareaValue, setTextareaValue] = useState(props.currentMarkdown);
useState will use props.currentMarkdown as the initial value but it doesn't update the current state when props.currentMarkdown changes.
Unrelated:
The debounce update of the parent state can be improved by using useRef
const timeout = useRef();
const handleMarkdownChange = (newValue) => {
if (timeout.current) {
clearTimeout(timeout.current);
}
timeout.current = setTimeout(function () {
console.log("fire");
const items = [];
for (let value of currentData.items) {
if (value["id"] === currentData.active) {
value.markdown = newValue;
value.unsaved = true;
}
items.push(value);
}
setCurrentData({ ...currentData, items: items });
}, 200);
};
using var timeout is bad because it declares timeout on every render, whereas useRef gives us a mutable reference that is persisted across renders

How can I update state in a component from a hook where that hook is used without causing infinite re-renders?

I have the following component:
const CallScreen = () => {
const [callEnded, setCallEnded] = useState(false);
const updateTimerColor = () => {
setCallEnded(true);
};
const clock = useTimer(
callStartTime,
callLength,
callTimeOut,
timerReady,
connectionState,
updateTimerColor,
);
Then in useTimer I want to call updateTimerColor when certain conditions are met. The problem is is that when the state updates, the hook is called again and because the conditions under which updateTimerColor is called are the same, the component infinitely re-renders.
How can I update state in CallScreen from the hook without creating an infinite loop?
TIA.

You should also include how you call updateTimerColor but maybe checking if callEnded changed value since last call before calling setCallEnded might prevent the infinite loop.
const updateTimerColor = () => {
//No need to set it again if the value did not change
if(!callEnded) {
setCallEnded(true);
}
};

React Hooks - Too many re-renders

I'm pretty new to both javascript and react hooks and I keep getting a 'Too many re-renders' error with the following code
const [showReminder, setShowReminder] = useState(
lastDismissedDate.diff(overrideDate, 'days') >= 0,
);
if (latestIndexScore && !hasCompletedIndexRecently(latestIndexScore.date)) {
setShowReminder(true);
}
Is there any way I can combine the two statements into one. Something like
const [showReminder, setShowReminder] = useState(
latestIndexScore && !hasCompletedIndexRecently(latestIndexScore.date) || lastDismissedDate.diff(overrideDate, 'days') >= 0,
);

if (latestIndexScore && !hasCompletedIndexRecently(latestIndexScore.date))
{
setShowReminder(true);
}
In the above code, the condition is true
then the setShowReminder will run or will change its state
in react if the state changes it will render again
so the codes will run again (the if statement) then the setShowReminder will run again and it will change the state again .... that cause Too many re-renders
try to use useEffect hooks and pass an array as an second argument to useEffect like this
const [showReminder, setShowReminder] = useState(false);
useEffect(() => {
setShowReminder(!showReminder);
}, [toggle]); // Only re-run the effect if toggle changes

How to provide window width to all React components that need it inside my app?

So I've got this hook to return the windowWidth for my App components. I'll call this Option #1.
import {useEffect, useState} from 'react';
function useWindowWidth() {
const [windowWidth,setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
function handleResize() {
setWindowWidth(window.innerWidth);
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowWidth;
}
export default useWindowWidth;
And right now I'm basically using it on every component that depends on the window width to render, like:
function Component(props) {
const windowWidth = useWindowWidth();
return(
// RETURN SOMETHING BASED ON WINDOW WIDTH
);
}
And since the hook has an event listener for the resize events, the component stays responsive even after window resizes.
But I'm worried that I'm attaching a new listener for every component that uses that hook and it might slow things down at some point. And I've though of other approach:
Option #2
I use the useWindowWidth() hook only one time, inside a top level component like <App/> and I'll provide the windowWidth value down the chain via context.
Like:
function App() {
const windowWidth = useWindowWidth();
return(
<WindowWidthContext.Provider value={windowWidth}>
<Rest_of_the_app/>
</WindowWidthContext.Provider>
);
}
And then, every component that needs it could get it via:
function Component() {
const windowWidth = useContext(WindowWidthContext);
return(
// SOMETHING BASED ON WINDOW WIDTH
);
}
QUESTION
Am I right in being bothered by that fact that I'm setting up multiple resize listeners with Option #1 ? Is Option #2 a good way to optmize that flow?

If your window with is used by so many components as you mentioned, you must prefer using context. As it reads below:
Context is for global scope of application.
So, #2 is perfect choice here per react.
First approach #1 might be good for components in same hierarchy but only up-to 2-3 levels.

I'm not sure if adding and removing event listeners is a more expensive operation than setting and deleting map keys but maybe the following would optimize it:
const changeTracker = (debounceTime => {
const listeners = new Map();
const add = fn => {
listeners.set(fn, fn);
return () => listeners.delete(fn);
};
let debounceTimeout;
window.addEventListener('resize', () => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(
() => {
const width=window.innerWidth;
listeners.forEach(l => l(width))
},
debounceTime
);
});
return add;
})(200);
function useWindowWidth() {
const [windowWidth, setWindowWidth] = useState(
() => window.innerWidth
);
useEffect(
() =>//changeTracker returns a remove function
changeTracker((width) =>
setWindowWidth(width)
),
[]
);
return windowWidth;
}

As HMR said in an above thread, my solution was to use redux to hold the width value. With this strategy you only need one listener and you can restrict how often you update with whatever tool you like. You could check if the width value is within the range of a new breakpoint and only update redux when that is true. This only works if your components dont need a steady stream of the window width, in that case just debounce.

ReactJS useEffect not rendering after dependency changed

So I'm currently working with React Hooks, and I'm trying to use useEffect. It supposed whenever that dependencies changed, the useEffect would re-render right? But it doesn't work for me. Here's my code :
const [slidesPerView, setSlidesPerView] = React.useState(0)
React.useEffect(() => {
setSlidesPerView(() => (window.innerWidth <= 375 ? 1 : 2))
console.log("rerender?", slidesPerView)
}, [window.innerWidth])
Everytime I changed the screen size, useEffect won't re-render. I wonder what did I do wrong?

useEffect will respond to either props changes or state changes.
Every time screen size changes component has no idea, if window.innerWidth is changed or not, because it is not in a state or props.
To get it working you need to store window.innerWidth into state, and attach a event listener to your window, whenever window size changes it will get the window.innerWidth and store it into the state, and as state changes your useEffect will get re-run, and finally your component will get re-render.
const [size, setSize] = React.useState(window.innerWidth)
React.useEffect(() => {
//Attach event on window which will track window size changes and store the width in state
window.addEventListener("resize", updateWidth);
setSlidesPerView(() => (size <= 375 ? 1 : 2));
console.log("rerender?", slidesPerView);
//It is important to remove EventListener attached on window.
return () => window.removeEventListener("resize", updateWidth);
}, [size])
const updateWidth = () => {
setSize(window.innerWidth)
}
Demo