Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
There are a few less commonly used built-in Hooks that you might find useful. For example, useContext lets you subscribe to React context without introducing nesting:

function Example() {
  const locale = useContext(LocaleContext);  const theme = useContext(ThemeContext);  // ...
}
Earlier on this page, we introduced an example FriendStatus component that displays whether a friend is online or not. Our class reads friend.id from this.props, subscribes to the friend status after the component mounts, and unsubscribes during unmounting:

componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

In your example, there is only a single row that can be updated at once, so if we start tracking which row the update occured on we can make sure only this row is updated. First, we must introduce a new component that wraps the table row where we can place our hook.


var Row = React.createClass({
    shouldComponentUpdate: function(nextProps) {
        return nextProps.mustUpdate;
    },
    render: function() {
        return <tr>{this.props.children}</tr>;
    }
});

I'm not sure why this is happening, but as a workaround you can introduce the useEffect hook:


const [name, setName] = useState('')
const [email, setEmail] = useState('')

useEffect(() => {
  setName(props.navigation.getParam('name'))
  setEmail(props.navigation.getParam('email'))
}, []);

However, since this is not the case, you could just add it yourself - either by introducing a layer of indirection (through a function of your own that would look like screenParamsFrom(navigation), or you could try to hook into the navigation object and add the function yourself by supplying the navigation object to the root navigator:


<MyRootNavigator navigation={addNavigationHelpers({
    dispatch: dispatch, 
    state: state, 
    params: paramsFunction})}/>

So basically we can do this inside a simple function, export this function, and use it whenever we want like so :


import NotificationManager from 'somewhere';

module.exports.createNotification = (type, message, className = 'filled') => {
    switch (type) {
      case 'success':
        NotificationManager.primary(
          message,
          'Primary Notification',
          5000,
          null,
          null,
          className,
        );
        break;
    ...
    default:
        NotificationManager.info('Info message');
        break;
    }

// import it and use it inside any component without introducing inheritance

import { createNotification } from 'somewhere-else'

// use it !

I introduced a new state-hook organisedData aside to loadingData, to give the second useEffect another value to check for before it executes the dispatch. Once organisedData is true, it's going to stop executing and thereby stop triggering itself now.


import React, { useState, useEffect } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { getRouteData, organiseRoutes } from '../utils';

export default function RoutePreviewScreen() {

    const dispatch = useDispatch();
    const [loadingData, setLoadingData] = useState(true);
    const currentRouteID = useSelector(state => state.currentRouteID);
    const filteredPinpoints = useSelector(state =>
        ObjectFilter(state.allPinpoints, pinpoint => pinpoint.Route_ID == state.currentRouteID)
    );

    // New:
    const [organisedData, setOrganisedData] = useState(false);

    useEffect(() => {
        (async function myFirstAsyncFunction() {

            // New:
            setLoadingData(true)

            await dispatch(getRouteData(currentRouteID));

            // New:
            setOrganisedData(false)
        })();
    }, [currentRouteID]);

    useEffect(() => {

        // New:
        if (!loadingData || organisedData) {
            return
        }

        if (Object.keys(filteredPinpoints).length === 0) {
            return
        }

        // New:
        setOrganisedData(true)

        dispatch(organiseRoutes(filteredPinpoints));

        // New:
        setLoadingData(false)

    // Adjusted:
    }, [organisedData, loadingData, filteredPinpoints]);

    if (loadingData) { return (<View><ActivityIndicator/></View>)}

    return(<ComponentUsingOrganisedRoutes/>)

Recommend

ReactDOMServer Reference renderToStaticNodeStream()

ReactDOMServer Reference renderToNodeStream()

ReactDOMServer Reference renderToStaticMarkup()

ReactDOMServer Reference renderToString()

ReactDOMServer

React Testing Recipes Multiple Renderers

React Testing Recipes Snapshot Testing

React Testing Recipes Timers

React Testing Recipes Events

React Testing Recipes Mocking Modules

React Testing Recipes Data Fetching

React Testing Recipes Rendering

React Testing Recipes act()

React Testing Recipes Setup/Teardown

React Rendering Elements Updating the Rendered Element

React Rendering Elements Rendering an Element into the DOM

React Rendering Elements

React Component State What is the difference between passing an object or a function in setState?

React Component State Why is setState giving me the wrong value?

React Refs and the DOM Callback Refs

React Refs and the DOM Accessing Refs Refs and Function Components

React Refs and the DOM Accessing Refs Adding a Ref to a Class Component

React Refs and the DOM Accessing Refs Adding a Ref to a DOM Element

React Refs and the DOM Accessing Refs

React Refs and the DOM Creating Refs

File Structure Is there a recommended way to structure React projects? Grouping by file type

File Structure Is there a recommended way to structure React projects? Grouping by features or routes

Glossary of React Terms Components props.children

Glossary of React Terms Components props

Glossary of React Terms Components

Glossary of React Terms Elements

Glossary of React Terms JSX

React Code-Splitting Named Exports

React Code-Splitting Route-based code splitting

Code-Splitting React.lazy Error boundaries

Code-Splitting React.lazy

React Code-Splitting import()

React Code-Splitting Bundling Example

React Test Utilities Other Utilities Simulate

React Test Utilities Reference renderIntoDocument()

React Test Utilities Reference findRenderedComponentWithType()

React Test Utilities Reference scryRenderedComponentsWithType()

React Test Utilities Reference findRenderedDOMComponentWithTag()

React Test Utilities Reference scryRenderedDOMComponentsWithTag()

React Test Utilities Reference findRenderedDOMComponentWithClass()

React Test Utilities Reference scryRenderedDOMComponentsWithClass()

React Test Utilities Reference findAllInRenderedTree()

React Test Utilities Reference isCompositeComponentWithType()

React Test Utilities Reference isCompositeComponent()

React Test Utilities Reference isDOMComponent()

React Test Utilities Reference isElementOfType()

React Test Utilities Reference isElement()

React Test Utilities Reference mockComponent()

React Test Utilities Reference act()

React Test Utilities

React Profiler API onRender Callback

React Profiler API Usage

React AJAX and APIs Example: Using AJAX results to set local state

React.Component Class Properties defaultProps

React.Component Other APIs forceUpdate()

React.Component Other APIs setState()

React.Component Reference UNSAFE_componentWillUpdate()

React.Component Reference UNSAFE_componentWillReceiveProps()

React.Component Reference UNSAFE_componentWillMount()

React.Component Reference componentDidCatch()

React.Component Reference static getDerivedStateFromError()