Gain insights into advanced React patterns with hooks. Learn about optimizing components with hooks over traditional methods like render props or higher-order components for better efficiency.

With the release of hooks, certain React patterns have gone out of style. Hooks are likely the way we’ll be writing React components for the next couple of years, so they are quite important. React patterns can still be used, but in most cases, developers will be better off using hooks. For example, they should choose hooks over render props or higher-order components. There may be specific cases where the aforementioned could still be used, but most of the time, hooks are better. That being said, this course will teach you some of the more advanced React patterns implemented with hooks.

Advanced React Patterns With Hooks

# Using `useRef` to Ensure Value Remains Constant
The solution to this problem is simple. We can use the `useRef` hook to ensure that a value stays the same throughout component's entire lifetime. 

Here’s how it works: 

//correct implementation
  const componentJustMounted = useRef(true)
  useEffect(
    () => {
      if (!componentJustMounted.current) {
        onExpand(expanded)
      }
     componentJustMounted.current = false
    },
    [expanded]
  )


`useRef` returns a `ref` object, and the value stored in the object may be retrieved from the current property, `ref.current`

The signature for `useRef` looks like this: `useRef(initialValue)`. 

This means that a `ref` object is stored initially in `componentJustMounted.current` with the `current` property set to `true`. 

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Conclusion

Keeping Value Constant

Using `useRef` to Ensure Value Remains Constant

Keeping Value Constant

Using useRef to Ensure Value Remains Constant

Using `useRef` to Ensure Value Remains Constant