You looking for useSelector hook.

Do not use store.getState() in functional component. Also, you do not need to connect functions components, use useDispatch hook.

Getting values from store will be like this:

const todos = useSelector(store => store.items);

The problem is that setState has two forms.

One where it accepts some object and one that it accepts a function which can work with existing state and returns the new state.

Now, when you pass a component reference, you are actually passing a function to it, and so setState assumes it is the second form, and tries to execute the function in order to get the updated state.

The workaround, as you have found out on your own, is to use the second form, passing a function that when executed will return the component you want.

As of version 7.x react-redux now has hooks for functional components.

Header.jsx

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Header.css';
import { Navbar, Nav } from 'react-bootstrap';
import HeaderMenu from '../HeaderMenu';
import cx from 'classnames';
import { useSelector } from 'react-redux'

function Header() {
  const store = useSelector(store => store)
  return (
    <Navbar fluid fixedTop id="Header" className={s.navContainer}>
      <Nav block className={cx(s.HeaderTitle, s.hideOnSmall)}>Project title</Nav>
      <HeaderMenu />
    </Navbar>
  );
}

export default withStyles(s)(Header);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

Edit 1

Some_File.js

import store from './redux/store.js';

function aFunction(){
   var newState =store.getState();
   console.log('state changed');
}

store.subscribe(aFunction)

I am assuming you have created store and reducers as redux expects.

~~~~~~~~~~~~~~~

Original Answer Starts

This is a sort of hack, I don't know what you are doing so I can't say you should or you should not do it, but you can do it this way. I have copy-pasted some of your code with some modifications.

Class XYZ extends React.Component{
     componentWillReceiveProps(props){
       //in your case this.props.storeCopy is redux state.
      //this function will be called every time state changes
     }

     render(){
        return null;
     }
}



function mapStateToProps(state) {
    return {
        storeCopy : state
    };
}

export default function connect(mapStateToProps)(XYZ);

Put this component somewhere at top, may just inside provider, whenever state changes this componentWillReceiveProps of this component will be invoked.

In your first useEffect, the repositories is your state which an array. Not a function.

Also, in your second useEffect you need to make correction to the way you access the prevState in hooks.

Fix for 1st useEffect

export default function Main() {
  const [newRepo, setNewRepo] = useState('');
  const [repositories, setRepositories] = useState([]);
  const [clearInput] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const localRepoItems = localStorage.getItem('repositories');

    if (localRepoItems) {
        setRepositories(JSON.parse(localRepoItems));
    }

  }, []); // do not give the dependency as repositories as it will go to infinite loop

  });

To obtain previous state in hooks, you can write a little custom hook: Like this:

export const usePrevious = value => {
  const ref = React.useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

Usage in your component:

const prevRepositories = usePrevious(repositories);
useEffect(() => {
    if (prevRepositories.length !== repositories.length) {
        localStorage.setItem('repositories', JSON.stringify(repositories));
    }
  }, [repositories]);

You don't want to store JSX in the state. Instead, store the model data for it, and loop through your data to print your elements!

you can do this:

state = {
    tabs: [
        { tabID: '1', callbackFunctionName: callbackFunction1 }
    ]
}

And inside your render method, you can use these data about the tabs you have stored in your state to render your custom component.

render(){
  const { tabs } = this.state;

  return (
    tabs.length > 0 && tabs.map((tab) => {
      return (
        <CustomComponent testCallback={this.tab['callbackFunctionName']} />
      )
    })
  )
}

When you are using Provider any component that is children of the Provider Higher Order Component can access the store properties though the use of connect function.

So you can add the following in any component that is a child of Provider and access the score prop

function mapStateToProps(state) {
  return { score: state.score, status: state.status };
}

export default connect(mapStateToProps)(MyComponent)

However if this other component is a direct child of App component then you can also pass the score prop as a prop to this component from App like

<MyComponent score={this.props.score}/>

If the calculations being done by strToNum are cheap (as they are in your simplified example), then the approach in Comp1 is probably the best and simplest. They'll run each time the component re-renders, so they're always up-to-date.

If the calculations are expensive, the recommended way to deal with this is the useMemo hook, like in your Comp4 example. However, you'd want to make sure to include num input variable in your dependents array so that numAsStr gets re-computed whenever num changes. E.g:

function Comp4({num:number}){
  const numAsStr = useMemo(()=>numToStr(num),[num]);
  return <span>{numAsStr}</span>
}

Using useState as you have in Comp2 would only run numToStr in the initial render, so you'd get stale values if num ever changed.

Using useEffect as you have in Comp3 introduces an unnecessary double-render - e.g. it renders first without a value for numAsStr and then renders again.

I know you said that you are currently sure that it never re-renders again - so some of the downsides/gotchas mentioned above might not apply in this case (and then I'd just go with the Comp1 approach, because it's simpler) but in my experience, it's best not to make that assumption - will you (or a team-mate) remember that in a month when you try to refactor something?