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

## Styling
So far, we’ve handled styling with the `className` prop. What about the option to override default styles by passing a `style` prop? As of right now, we can’t do that

Let’s fix that! 

Instead of explicitly destructuring the `style` prop, we can pass any other prop passed by the user to the `button` component.

import React from 'react'
import Expandable from './components/Expandable'

function App () {
  return (
    <div className='App'>
      <Expandable>
        <Expandable.Header>React hooks</Expandable.Header>
        <Expandable.Icon />
        <Expandable.Body>Hooks are awesome</Expandable.Body>
      </Expandable> 
    </div>
  )
}

export default App


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart


Note the use of the [rest parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) and [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) on **lines number 5** and **10**, respectively, in `Header.js`. 

With this done, the `Header` component receives our default styles, while allowing for change via the `className` or `style` props. Here's how you would pass styles to the `Header` component.

# Styling
So far, we’ve handled styling with the `className` prop. What about the option to override default styles by passing a `style` prop? As of right now, we can’t do that

Let’s fix that! 

Instead of explicitly destructuring the `style` prop, we can pass any other prop passed by the user to the `button` component.

We'll now learn how to override default styles!

Introduction

Compound Components Pattern

Control Props

Props Collection

Prop Getters

State Initializer

State Reducer

Create a Trello Clone with React

Conclusion

Custom Styling Options

Styling