Helper functions should not depend on the context of the component they are called to (at least in my opinion). If you need to use some parameter in your function passing that to function is always a better practice since it helps on re-usability. The key for the state property might be different for all components and this might lead to errors if you forget to use exact key for the state property.

For Example

export function passwordValidation(password) {
  const length = password.length;
  if (length > 7) return 'success';
  else if (length > 4) return 'warning';
  else if (length > 0) return 'error';
}

If I change function like above I can use all the given examples below.

import { passwordValidation } from '/path/to/helper/functions.js';

console.log(passwordValidation(this.state.password));
console.log(passwordValidation(this.state.confirmPassword));
console.log(passwordValidation(this.props.password));
console.log(passwordValidation(someFetchedObject.user.password));

Best way to implement this would be creating a separate global component which does this functionality.

Suppose in components.js , you have :

export const  doSomethingElse = () => { 
        return 1;
      }

And wherever you want it you can do by ,

In Cat.js :

import {doSomethingElse} from 'component.js';

doSomethingElse();

Even you can make like a view component like :

export const displayTime = (time) => (
<View>
<Text>{time}</Text>
</View>

)

And you can import in Dog.js like :

import {displayTime} from 'component.js';


render(){
return(
<View>
{this.displayTime('12:00PM');}
</View>
)
}

Hope it helps. feel free for doubts

The current way to do this in React is to use composition rather than mixins. Composition is also known as "higher-order components" and looks a bit like this:

class Foo extends React.Component {
    render() {
        return <div>{ this.props.b }</div>;
    }
}

const EmbedClassName = function(Child) {
    var b = Child.constructor.displayName;
    return (props) => <Child {...props} b={b} />;
};

var ComposedFoo = EmbedClassName(Foo);

To reuse the functionality of useEffect and other functions, here you may use custom hook and cover the common functionality in the custom hook and re-use in component where you need.

ex.

import React, { useCallback, useEffect, useState } from "react";

// ----------------------------------  Custom Hook  -----------------------------

const useCustomFetch = ({someProp}) => {
    const [itemData, setItemData] = useState(null);

    const resolveSessionData = useCallback(() => {
        const data = database.getItemData(); // fetching data
        setItemData(data); // setting fetched data to state
    }, []);

    useEffect(() => {
        if (someProp) {
            resolveSessionData(); // or may be fetch data based on props
        }
    }, [someProp]);

    const addNewItem = useCallback(function (dataToAdd) {
        /**
         * write code to add new item to state
        */
    }, [])

    const removeExistingItem = useCallback(function (dataOrIndexToRemove) {
        /**
         * write code to remove existing item from state
        */
    }, [])

    return {
        itemData,
        addNewItem,
        removeExistingItem,
    }
}

// ----------------------------------  Component managing users  -----------------------------

const ComponentUser = ({someProp}) => {
  const {
    addNewItem,
    itemData,
    removeExistingItem
  } = useCustomFetch('users')

  const handleAction = useCallback(function (action, data) {
    if (action === 'add') {
        addNewItem(data) // ex. adding user
    } else if (action === 'remove') {
        removeExistingItem(data) // ex. removing user
    }
  }, [])

  return <div>
    {itemData.map(function () {
        /**
         * render items here // ex. listing users
         */
    })}
    <button onClick={handleAction}>
        Add / Remove
    </button>
  </div>;
};

// ----------------------------------  Component managing posts  -----------------------------

const ComponentPosts = ({someProp}) => {
    const {
      addNewItem,
      itemData,
      removeExistingItem
    } = useCustomFetch('posts') // re-using custom hook
  
    const handleAction = useCallback(function (action, data) {
      if (action === 'add') {
          addNewItem(data) // ex. add new post
      } else if (action === 'remove') {
          removeExistingItem(data) // ex. remove existing post
      }
    }, [])
  
    return <div>
      {itemData.map(function () {
          /**
           * render items here // ex. render posts
           */
      })}
      <button onClick={handleAction}>
          Activate Lasers
      </button>
    </div>;
};