In my previous role we were using mostly pure functions in React. Remember that React is a "library for building user interfaces". Often I see React projects where components are very object-oriented and encapsulate state, behavior, UI, and even style. There is a tradeoff to be made. When you encapsulate all those things in the component, you arguably get better readability, but you lose flexibility, reusability, testability, and loose coupling.

For starters I recommend you separate all behavior out of React components and inject the behavior through component properties. You can then define all your behavior as pure functions as well--even stateful behavior. Check out Recompose for a bunch of higher-order components that help keep functional when dealing with state.

As a concrete example, let's consider a button that increments a counter. With object-oriented components, you might write something like:

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0,
    }
  }

  render() {
    const {
      counter,
    } = this.state

    const onClick = () => {
      this.setState({
        counter: counter + 1,
      })
    }

    return (
      <button onClick={onClick}>Val {counter} click to increase</button>
    )
  }
}

With functional programming we would write it like so:

// pure functional component
const Counter = ({
  onClick,
  counter,
}) => (
  <button onClick={onClick}>Val {counter} click to increase</button>
)


// elsewhere define the behavior again as pure functions
const FunctionalCounter = Recompose.withStateHandlers({
  counter: 0, // our initial state
}, {
  onClick: ({ counter }) => () => ({ // a pure function that takes state, props, and parameters and updates state
    counter: counter + 1,
  }),
})(Counter)

Angular is a completely different beast because it's not a UI library, it's a "front-end web application framework" and it imposes a lot of constraints on how you write your applications. I'm unfamiliar with how one would write an Angular application with functional programming, but you can apply the same principles that I've done with React. Specifically, separate your behavior and business logic out of the UI into thoughtfully organized functions that are injected into the UI (i.e. you could use Angular's dependency injection to inject your business logic functions). It's generally a good idea to do this anyway so that your application logic is not coupled to a UI framework.

In my previous role we were using mostly pure functions in React. Remember that React is a "library for building user interfaces". Often I see React projects where components are very object-oriented and encapsulate state, behavior, UI, and even style. There is a tradeoff to be made. When you encapsulate all those things in the component, you arguably get better readability, but you lose flexibility, reusability, testability, and loose coupling.

For starters I recommend you separate all behavior out of React components and inject the behavior through component properties. You can then define all your behavior as pure functions as well--even stateful behavior. Check out Recompose for a bunch of higher-order components that help keep functional when dealing with component state and Redux for application state.

As a concrete example, let's consider a button that increments a counter. With object-oriented components, you might write something like:

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0,
    }
  }

  render() {
    const {
      counter,
    } = this.state

    const onClick = () => {
      this.setState({
        counter: counter + 1,
      })
    }

    return (
      <button onClick={onClick}>Val {counter} click to increase</button>
    )
  }
}

With functional programming we would write it like so:

// pure functional component
const Counter = ({
  onClick,
  counter,
}) => (
  <button onClick={onClick}>Val {counter} click to increase</button>
)


// elsewhere define the behavior again as pure functions
const FunctionalCounter = Recompose.withStateHandlers({
  counter: 0, // our initial state
}, {
  onClick: ({ counter }) => () => ({ // a pure function that takes state, props, and parameters and updates state
    counter: counter + 1,
  }),
})(Counter)

Angular is a completely different beast because it's not a UI library, it's a "front-end web application framework" and it imposes a lot of constraints on how you write your applications. I'm unfamiliar with how one would write an Angular application with functional programming, but you can apply the same principles that I've done with React. Specifically, separate your behavior and business logic out of the UI into thoughtfully organized functions that are injected into the UI (i.e. you could use Angular's dependency injection to inject your business logic functions). It's generally a good idea to do this anyway so that your application logic is not coupled to a UI framework.

In my previous role we were using mostly pure functions in React. Remember that React is a "library for building user interfaces". Often I see React projects where components are very object-oriented and encapsulate state, behavior, UI, and even style. There is a tradeoff to be made. When you encapsulate all those things in the component, you arguably get better readability, but you lose flexibility, reusability, and loose coupling.

For starters I recommend you separate all behavior out of React components and inject the behavior through component properties. You can then define all your behavior as pure functions as well--even stateful behavior. Check out Recompose for a bunch of higher-order components that help keep functional when dealing with state.

As a concrete example, let's consider a button that increments a counter. With object-oriented components, you might write something like:

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0,
    }
  }

  render() {
    const {
      counter,
    } = this.state

    const onClick = () => {
      this.setState({
        counter: counter + 1,
      })
    }

    return (
      <button onClick={onClick}>Val {counter} click to increase</button>
    )
  }
}

With functional programming we would write it like so:

// pure functional component
const Counter = ({
  onClick,
  counter,
}) => (
  <button onClick={onClick}>Val {counter} click to increase</button>
)


// elsewhere define the behavior again as pure functions
const FunctionalCounter = Recompose.withStateHandlers({
  counter: 0, // our initial state
}, {
  onClick: ({ counter }) => () => ({ // a pure function that takes state, props, and parameters and updates state
    counter: counter + 1,
  }),
})(Counter)

Angular is a completely different beast because it's not a UI library, it's a "front-end web application framework" and it imposes a lot of constraints on how you write your applications. I'm unfamiliar with how one would write an Angular application with functional programming, but you can apply the same principles that I've done with React. Specifically, separate your behavior and business logic out of the UI into thoughtfully organized functions that are injected into the UI (i.e. you could use Angular's dependency injection to inject your business logic functions). It's generally a good idea to do this anyway so that your application logic is not coupled to a UI framework.

In my previous role we were using mostly pure functions in React. Remember that React is a "library for building user interfaces". Often I see React projects where components are very object-oriented and encapsulate state, behavior, UI, and even style. There is a tradeoff to be made. When you encapsulate all those things in the component, you arguably get better readability, but you lose flexibility, reusability, testability, and loose coupling.

For starters I recommend you separate all behavior out of React components and inject the behavior through component properties. You can then define all your behavior as pure functions as well--even stateful behavior. Check out Recompose for a bunch of higher-order components that help keep functional when dealing with state.

As a concrete example, let's consider a button that increments a counter. With object-oriented components, you might write something like:

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0,
    }
  }

  render() {
    const {
      counter,
    } = this.state

    const onClick = () => {
      this.setState({
        counter: counter + 1,
      })
    }

    return (
      <button onClick={onClick}>Val {counter} click to increase</button>
    )
  }
}

With functional programming we would write it like so:

// pure functional component
const Counter = ({
  onClick,
  counter,
}) => (
  <button onClick={onClick}>Val {counter} click to increase</button>
)


// elsewhere define the behavior again as pure functions
const FunctionalCounter = Recompose.withStateHandlers({
  counter: 0, // our initial state
}, {
  onClick: ({ counter }) => () => ({ // a pure function that takes state, props, and parameters and updates state
    counter: counter + 1,
  }),
})(Counter)

Angular is a completely different beast because it's not a UI library, it's a "front-end web application framework" and it imposes a lot of constraints on how you write your applications. I'm unfamiliar with how one would write an Angular application with functional programming, but you can apply the same principles that I've done with React. Specifically, separate your behavior and business logic out of the UI into thoughtfully organized functions that are injected into the UI (i.e. you could use Angular's dependency injection to inject your business logic functions). It's generally a good idea to do this anyway so that your application logic is not coupled to a UI framework.