use-state-effect v1.0.1

useStateEffect

useStateEffect is Hooks that can synchronize data. It is used to easily reprocess the inherited data (Props or useSelector...) within the component.

Install with npm

$ npm install use-state-effect
# or 
$ yarn add use-state-effect

Example

import useStateEffect from 'use-state-effect';

// original code
const Component = ({ list }) => {
  const [filteredList, setFilteredList] = useState(list.filter(v => v.visible));
  
  useEffect(() => {
    setFilteredList(list.filter(v => v.visible);
  }, [list]);

  ...
}

// with useStateEffect
const Component = ({ list }) => {
  const [filteredList, setFilteredList] = useStateEffect(() => list.filter(v => v.visible), [list]);

  ...
}

import useStateEffect from 'useStateEffect';

// original code
const Component = () => {
  const [currentHeight, setCurrentHeight] = useState(window.innerHeight));
  
  useEffect(() => {
    setCurrentHeight(() => window.innerHeight);
  }, []);

  ...
}

// with useStateEffect
const Component = () => {
  const [currentHeight] = useStateEffect(() => window.innerHeight), [window.innerHeight]);
  
  ...
}

import useStateEffect from 'useStateEffect';

// original code
const Component = ({ user }) => {
  const userId = user.id; 

  ...
}

// with useStateEffect
const Component = ({ user }) => {
  const [userId] = useStateEffect(() => user.id), [user.id]);
  
  ...
}