Building a large scale React app may include some re-renders headaches. The growth of your app may cause you to spend a lot of time investigating why “heavy” components re-rendered much more then you expected.
In this article, I’ll demonstrate a common use-case and will explain how placing useState / useSelector in the right component can optimize performance.
How does React work?
when the state of a component changes, it triggers the component’s re-render.
For example (codeSandbox):
const App = () => {
const [counter, setCounter] = useState(0);
return (
<div>
<button onClick={() => setCounter(counter + 1)}>Counter</button> <Component1 />…
I’ve searched the web for a robust way to handle permissions in the UI level in a React app, but I haven’t found any proper way to inject the permissions the component needs without messing the jsx. In this article, I’ll share my way of thinking step by step until we will reach to the final solution. This solution will keep your components as clean and semantic as possible.
NOTE: This article will not discuss routes with permissions.
The requirements were quite straight forward:
- Each user has a list of permissions.
- User can or can’t see some components considering his permissions.
- Adding permissions to any react…
