React
Understanding state scheduling and batching in React
We know how React manages state, or at least we have an idea, but there's one thing which is important: and that is how React handles state updates. In your code, you might have a component and in that component, you might manage some state with the help of the useState hook and therefore React manages that state for you.
Read
A closer look at state and components in React
Obviously, state is a crucial concept in React. Ultimately, everything comes down to state when it comes to re-rendering components and changing what's on the screen. So therefore components and their interaction with state, is really a core aspect of React. And it is worth noting that both, of course, are managed by React. This components concept comes from the React library, and React also takes care of your state that is attached to components. It takes care, for example, by using the useState hook, and that's how this interaction between components ans state is handled.
Read
A look behind the scenes of React and optimizations techniques
In React apps you work with components, typically with function components in modern React. Those components have one job in the end, and that is the JSX code, which they return. This tells React what the output of that component should be. Now in your React components, you can work with state, or with props, or with context, though props and context as I mentioned, all come down to state changes in the end, to make changes to a component and to make changes to the data that affect this component or that affects parts of your application.
Read
React - useCallback() and its dependencies
It is very important to understand the useCallback() hook. useCallback() allows you to save a function so that you can reuse it. Now you had to specify this dependency array, and I don't know about you, but initially you might think, what do I need this for? My function has always the same logic across rerender cycles. Well, keep in mind that in JavaScript functions are closures, which means they close over the values that are available in their environment.
Read
Preventing function re-creation in React with useCallback
We can make React Memo work for prop values that are objects as well. We just need to tweak the way we create and store those objects a little bit. There is an extra hook provided by React that helps us with that. And that is the useCallback hook.
Read
Preventing unnecessary re-evaluation with React memo
It's needless to say that React is highly optimized. So, in a lot of apps and especially in bigger apps you still need to add some optimizations. And, therefore, you as a developer can tell React that it should only re-execute a component under certain circumstances. And those circumstances would be that the props, which the components receive, are changed for example.
Read
React child component re-evaluation
In React, a component function reruns when the context, state and props are changed. This means that all child components also reruns.
Read
React component updates
In React, a component function runs every time when the context, props or state is changed. After the component render, the component updates the real DOM with the new changes based on the component run.
Read
How React really works
I really helps to understand how something works that you're using to ensure that you are using it correctly. So how does React work? Lets not forget that React is a JavaScript library for building user interfaces. React is all about components. We use components to build those user interfaces, and React embraces this component concept. It uses components to effectively compose user interfaces and it uses components to effectively update user interfaces.
Read
React - Create a modal via React portal
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Next, we will show how to create a modal using the React portal.
Read
React useEffect hook summary
useEffect besides useState is the most important React hook you have, so you need to understand it. Therefore, I again, want to make it clear at which point of time, which part of useEffect kicks in and executes. Next, I'll present some useEffect use cases. First example is for the case of a useEffect that runs when a state is updated or a key is pressed.
Read
Using the useEffect cleanup function in React
Sometimes you have an useEffect that needs to do some cleanup work and that sounds very abstract so let me give you a more concrete example. Let's say that we execute a function in a useEffect hook that essentially is executed on every keystroke, like in the following example:
Read
React: What to add and not to add as dependencies in useEffect hook
You learned, that you should add "everything" you use in the effect function as a dependency - i.e. all state variables and functions you use in there.
Read
React: useEffect & dependencies
We need dependencies in a useEffect hook when we want to execute the code from the useEffect after every dependencies change. So if we want that our code from useEffect to run when the component is loaded we will put for dependencies an empty array and if we want to run after a certain depency change we need to add that dependency in the array. If we delete the array we will have an infinite loop. useEffect in general is a super helping hook that helps you deal with code that should be executed in response to something and something could be the component being loaded, it could be the email address being updated, it could be anything, whenever you have an action that should be executed in response to some other action, that is a side effect and that is where a useEffect is able to help you.
Read