What is React
Most commonly used features in REACT
React Functional Components
REACT hooks are functions that let us hook into REACT state and lifecycle features from function components. With hooks, you can extract stateful logic from components so it can be tested independently and reused. Hooks allow us to reuse stateful logic without changing the component hierarchy, and this makes it easy to share hooks among many components or with the community. There are some other rules to follow when using hooks as well.
- Hooks only run the scope of components and they're always coded in the top level of the REACT function. All hooks start with the 'use' word.
We're going to look into some of the hooks here that are presented:
Let's start with one of the most commonly used, which is the 'useState'. 'useState' is a hook that allows us to have state variables in functional components. You pass the initial state to this function, and it returns a variable with the current state value and another function to update this value. What is important here to mention about the 'useState' is that every time we update its value, the components will render, which means that the change will be immediately shown on screen. We can also use those state variables created with the 'useState' hook and pass them down to nested children and components. This approach is called "property link" and it's one of the most common ways you come across to share data between components. There are, of course, other ways of managing state within our app. When you have a large dome tree with lots of components, it becomes cumbersome to pass data props variables to sibling components. Using context still allows us to store data in a single location, but it doesn't require us to pass the data through a bunch of components that don't need it. Of course, there is a downside to this because it means that components become less reusable. There are also other methods we can use. For example, third-party libraries. One of them is Redux. Redux allows us to manage state in a single place and keep changing our app to be more predictable and traceable. It makes the current changes in the app easier to figure out, but unfortunately, all of these benefits come with specific constraints and trade-offs. Frequently, developers feel using redux adds up some boilerplate code, making little things seem overwhelming. However, this depends solely on the app's architectural decision.
The 'useEffect' hook lets us perform side effects in function components—data fetching, setting up a subscription, and manually changing the dom in react components are all examples of such side effects. You can call this operation just side effects. In React we have something called the react components life cycle which is a collection of react component life cycle stages. With 'useEffect' hook, we can execute code for each of those life cycle stages.
So let's look into some of them:
- The initialization in the mounting is the first stage of the React components' life cycle where the component is created and inserted into the dom tree.
- Updation can happen when a state variable is updated.
- Unmounting is when the component is removed from the dom.
'useRef' hook is used when we want to keep the value that changes. Like in the case of the 'useState' hook, though, doesn't trigger a re-render when the value changes. Often we also use the 'useRef' hook to attach to a dom element, and then we can manipulate these properties.
Common reading resources
Useful books for beginners:
- Learning React Modern Patterns For Developing React Apps
- Online courses that provide great structure and explanation