I have created a controlled component that constrains an input field to only 4 numbers. These numbers can be changed at any time and any time the number is four digits I want the result to be passed to a sibling component to action.
I am sending the value to the parent state and this re-renders and the sibling gets the value. But my component also re-renders and the input fields loses the value.
Should I just send the value to the parent let the parent re-render on every input change?
Or use Context?
Any insight would be great as I am new to React.
const NumberComp = ({setPostcode})=>{
const [ fieldValue, setFieldValue ] = useState('')
useEffect(()=>{
if(fieldValue.length == 4){
setPostcode(fieldValue)
}
}, [fieldValue])
const updateNumber = (e)=>{
const value = e.target.value
if(value.length > 4 || isNaN(value)) return
setFieldValue(value)
}
return <input onChange={updateNumber} value={fieldValue} type="text" />
}
If your project is small then uplift the state and pass it down to sibling components and component memoize else use context API if you want to avoid prop drilling.
You need to let the re-render happen on the parent as well. A child render is possible only when the parent is re-rendered. However, this won't re-render unchanged parts, as React updates only what is necessary.
You can also check out this question to help clear your doubts up.
You can also try using react memos, but it would need some fine control to ensure that your component updates when it is supposed to.